Scalable Vector Graphics: an Overview

What Are SVGs?

SVGs are vector graphics. Rather than defining the color of each
pixel like you would in a bitmap (JPEG, PNG, GIF, BMP etc.), vector
graphics define lines and shapes, e.g. draw a black line from
co-ordinate 0,0 to 100,100. This has a number of advantages: vectors are
easy to modify, generally require smaller files and are scalable to any
dimension without losing quality — which makes them ideal for
responsive web design. Bitmaps remain the best choice for photographs or
very complex images (note that SVGs can include embedded bitmaps).

vector vs bitmap comparison

SVG is a royalty-free web standard maintained by the W3C SVG Working Group. Version 1.0 of the technology was originally proposed in 1999. Version 1.1 is the most recent standard with version 2.0 expected in 2013.

There are a couple of other flavors: SVG Tiny and SVG Mobile.
These are simplified profiles or subsets of the full SVG specification
which target devices with reduced computational and display
capabilities. These standards largely relate to how rendering engines
parse the image; an SVG 1.1 file can be rendered on a device which
supports SVG Tiny but some effects such as gradients and opacities would
not be applied.

How are SVGs Defined?

SVGs are declared using eXtensible Markup Language (XML). It uses
tags like HTML — the following code draws a white circle with a black
border:


<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

Be aware that XML is stricter than HTML. You cannot, for example,
omit a closing tag since this will make the file invalid and the SVG
will not be rendered.

The W3C SVG1.1 specification defines 14 main features:

Basic shapes: straight lines, polygons, circles, ellipses, and rectangles with or without rounded corners.
Paths: outlined or filled paths containing curved or straight lines.
Text: on straight or curved paths in any direction.
Painting: fills and outlines using solid colors, gradients, patterns, transparency, and markers (line terminators such as arrow heads).
Color: fill and stroke properties defined using standard 3 or 6-digit hex or rgb values.
Gradients and patterns: CSS3-like gradient declarations or bitmap backgrounds.
Clipping, masking and compositing: using elements to outline regions which can be painted.
Filters: effects applied to all elements within a container, e.g. blurring, lighting, color adjustments, etc.
Linking: hyperlinks to other documents.
Interactivity: attaching event handlers using JavaScript.
DOM Scripting: accessing and manipulating SVG elements using the Document Object Model.
Animation: built-in animations using Synchronized Multimedia Integration Language (SMIL).
Fonts: text glyphs defined in an SVG file which can be used as a standard font.
Metadata: titles, descriptions, subjects, creators and other properties about the SVG image.

Cascading Stylesheets in SVGs

SVGs also support embedded or external CSS rules. Like HTML, the
selectors can target tag types or IDs and classes assigned to specific
elements. CSS properties and values generally follow element attributes.
For example, this CSS renders every circle in the SVG with the same
white fill and black border color:


circle
{
 stroke: #000;
 fill: #fff;
}

SVG Creation Tools

Creating SVGs in a text editor is possible but it’s a slow process,
error-prone and not much fun. Fortunately, there are several open source
and commercial tools which allow designers and non-programmers to
easily create SVG images:

Therefore, a design team could create a great-looking chart which a
programmer can modify by applying real data to specific elements.

However, note that some graphics packages may not create the most optimal code or apply their own XML extensions.

SVG Browser Support

Although the technology has been available for more than a decade,
SVG use within browsers was held back by Internet Explorer which first
provided support in IE9. Today, most desktop and mobile browsers can
handle SVGs and it is a recognized HTML5 standard.

Browser implementations vary, but SVGs can either be:

viewed as a separate file directly in a web browser.
embedded as an XML section within an HTML page.
defined as an external page resource within img, object or the old embed tags (or as an iframe, although that’s effectively viewing the SVG file)
set as background image in CSS.

There are a number of plug-in and shim options if you require SVG
support in Internet Explorer 8.0 and below. Several fallback to Vector
Markup Language (VML); a technology used in Microsoft products which
influenced the SVG standard:

Raphaël — JavaScript/VML
AmpleSDK — JavaScript/VML
svgweb — JavaScript/Flash
Batik — Java toolkit

SVG Performance in Browsers

SVG XML must be parsed to render images on-screen and represented in
memory as a Document Object Model. As with HTML pages, performance will
be affected if you attempt to move or manipulate SVGs containing a large
number of elements. In extreme cases, the redraw will be noticeable.

For this reason, it’s often preferable to use the HTML5 canvas
tag for fast action games with hundreds of animated items. However, you
may be able to adopt SVGs for some aspects, e.g. a player’s spaceship
could be a simple SVG which can be moved, rotated, scaled and warped
over a canvas-generated background.

SVGs and Accessibility

Owing to their XML data structure, SVGs provide better accessibility than bitmap images. At a basic level, meta data, short text and long text alternatives can be applied to any SVG image.

That said, screen reader support is poor. SVGs were not considered a
viable browser technology until the release of IE9 so vendors did not
consider them a priority. The situation will undoubtedly improve.

In the short term, you could consider transforming SVG XML into a text-based alternative using XSLT.

SVGs and Search Engine Optimization

Unlike bitmaps, XML is inherently machine-readable so static SVG
files can be read, parsed and indexed by search engine bots. Google has
been indexing SVG content since August 2010 and results can be found in
the standard and image search systems.

Replacing a few PNGs with SVGs is unlikely to improve your rankings.
However, if you’re displaying data as images without textual fall-backs,
switching to SVGs could offer an SEO boost.

In my next SVG article we’ll create our first images without the use of a graphics package!

t some point, you’ll want to embed your finely-crafted SVG directly
into a web page. There are no less than six ways to achieve that goal —
but not all methods are created equally.

1. Using an <object> Tag

If you intend using any advanced SVG features such as CSS and scripting, the HTML5 <object> tag is your best option:

<object type="image/svg+xml" data="image.svg">
  Your browser does not support SVG
</object>

Note you can provide fallback text or images within the object block.

2. Using an <embed> Tag

I’m including <embed> for the purpose of completeness but don’t use it! While it’s similar to <object>, <embed>
never has been and probably never will be part of any HTML or XHTML
specification. However, it’s supported by most browsers and is often
used to implement Flash plugins.

Here’s the code. It works, but don’t use it!…

<embed type="image/svg+xml" src="image.svg" />

3. Within an <iframe>

Since browsers can render SVG documents in their own right, it’s possible to load images within an iframe:

<iframe src="image.svg">
  Your browser does not support iframes
</iframe>

This may be a good method if you want to completely separate SVG code
and script from your main page. However, manipulating an SVG image from
your main page’s JavaScript will become a little more difficult.

Personally, I prefer to avoid iframes but that’s not to say you should never use them.

4. Inline SVG XML Embedded Into Your HTML5 Page

An SVG image can be added as a code island directly within your HTML5 page using outer <svg> tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Embedded SVG</title>
</head>
<body>
  <h1>Embedded SVG</h1>

  <!-- SVG code -->
  <svg width="300px" height="300px" 
    xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" font-size="30">My SVG</text>
  </svg>

</body>
</html>

The method works in all HTML5 browsers and also permits animation,
scripting and CSS. But should you use it? The method feels a little
dirty to me. It’s possibly an option for simple images or if you’re
building the image using JavaScript, but I recommend you keep your files
separate when possible.

5. Using an <img> Tag

SVGs can be added to your web page like any other image:

<img src="image.svg" />

The usual width, height, alt and other attributes can be added should you require them.

You’re probably wondering why img
isn’t #1 in this list. For security reasons, browsers will disable SVG
scripts, linking and other types of interactivity when they’re added to
your page with an img tag. In addition, IE9, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file.

6. Using a CSS Background Image

SVGs can be used as a CSS background for any element:

#myelement {
  background-image: url(image.svg);
}

Like <img> tags, SVG scripts, linking and other types of interactivity are disabled when you use this method.

Which Should You Use?

More from this author

In most circumstances, I recommend using the <object>
tag to display SVG images. It feels a little unnatural, but it’s the
most reliable method if you want to provide dynamic effects.

For images without interaction, the <img> tag or a CSS background can be used.

Inline SVGs or iframes are possibly options for some projects, but it’s best to avoid <embed>.

Coming soon: further SVG articles including CSS and scripting…

Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?

Μελέτη - Περιοδικό για Μαθητές

Τετάρτη 4 Ιανουαρίου 2017