SVG images or Scalable Vector Graphics

SVG stands for Scalable Vector Graphics and defines vector-based graphics in XML format. Until what extent do Web browsers support this type of images? The short answer is "Today browsers offer excellent support to SVG images".

Vector graphic creation

There are excellent tutorials out there: the websites w3schools.com and www.svgbasics.com, Jake Giltsoff's Practical Guide at https://svgontheweb.com and the excellent help of Inscape software, which also links to other sources.

Displaying svg images

We can achieve the display of SVG images in web browsers using several methods:

svg tag

We can embed it in an HTML page "inline" using the svg tag. This method brings performance as it saves http requests. Obviously, the browser will not cache the image. See the result opposite, on the right.

object tag

Or in an object tag. See the code example and result by clicking the example link.

embed, img, iframe

The above tags, as well as a background image, are other available methods to display a svg image. See the code examples and results by clicking the example link.

Pointing to the image URL

Another method to display a svg file in the browser: pointing direct to the image URL. A few cautions to have this method work properly: Considering the image tag itself (inside the svg tag), browsers such as Mozilla or Opera are either expecting a tag closure such as /image or simply closing with / as in xml. Some browsers will also display an error for the xlink:href=" part. To avoid this error, we must provide the following namespace in the root element of the svg tag: xmlns:xlink=http://www.w3.org/1999/xlink. The W3 Wiki article on SVG links gives more in-depth explanations on this matter https://www.w3.org/wiki/SVG_Links. See the code example and result by clicking the example link.

Comparing the methods

object, iframe, and embed tags will achieve a similar effect: a new browsing context and DOM; animation and script will run. If the img tag displays the image and declarative animation runs, no script can run (of course). A background image in a CSS acts in a similar mode as an img tag.

Browsers' support

This Wikipedia article analyses browsers' support for scalable vector graphics in the various layout engines: https://en.wikipedia.org/wiki/Comparison_of_layout_engines_ (Scalable_Vector_Graphics) The article "Up and running with SVG" (svgtutorial.com) offerss details about browsers' support for embed and object tags.

Fallback

I am indebted to Alexey Ten for the graceful degradation method in the svg tag (http://lynn.ru/examples/svg/en.html). Works fine with old versions of IE and Firefox, not yet tested with others. We can find more information in the W3 Wiki, discussing HREF and SRC in SVG. There is also a W3C resource for meta data in the file example.

The discussion is somehow technical but it is worthwhile; the SVG format offers designers quick, easy and rich means for lightweight vector images.

iS k iv

All examples


Download this page as a quick guide (click Download to save as PDF file)Download

All examples are working examples. You can view the code by clicking the links below, which open in a second window. At the bottom of the example, you will find a link to download the example as a PDF file:
Inline svg images
Object tag
Other options
Pointing to the URL

Want to hear about new columns and resources:

A project? A question? Have a comment?

Leave us a

Go Top