Design & UX
Article
By Ivaylo Gerchev

SVG 101: What is SVG? (and what is it actually good for?)

By Ivaylo Gerchev
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

SVG 101 Header

Though it was conceived back in the late 1990’s, SVG is, in many ways, the ‘ugly duckling’ file format that grew up to become a swan. Poorly supported and largely ignored for most of the 2000s, in 2017 all modern web browsers can render SVG – and most vector drawing programs export it.

It turns out that SVG was the one graphic format that most closely responds to current web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.

--ADVERTISEMENT--

So, What Is SVG and Why Should You Use It?

SVG is a vector graphic format—based on XML and is used to display a variety of graphics on the Web and other environments.

Under the hood, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text. As it is human-readable, easily understood and modified, SVG code can be manipulated via CSS or JavaScript. This give SVG a flexiblity and versatility that can’t ever be matched by traditional PNG, GIF or JPGs.

SVG is an W3C standard, which means it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it seems likely SVG will continue to be the de-facto standard for vector graphics in the browser.

The true value of SVG is it solves many of the most vexing problems in modern web development. Let’s see what they are.

  • Scalability and Responsiveness

    Under the hood, SVG uses shapes, numbers and coordinates — rather than a pixel grid — to render graphics in the browser, which makes it resolution-independent and infinitely scalable. If you think about it, the instructions for creating a circle are the same whether you’re using a pen or a skywriting plane – only the scale changes.

    With SVG, you can combine different shapes, paths and text elements to create all kinds of visuals and to be sure that they will look clear and crisp at any size.

    In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which causes them to pixelate when they are scaled. Although various responsive image techniques have proved valuable for pixel graphics, they will never be able to truly compete with SVG’s ability to scale infinitely.

  • Programmability and Interactivity

    SVG is fully editable and scriptable. All kinds of animations and interactions can be added to a drawing via CSS and/or JavaScript.

  • Accessibility

    SVG files are text-based and do can be searched and indexed. This make them readable by screen readers, search engines and other devices. By contrast, a chart

  • Performance

    One of the most important aspects impacting web performance is the size of the used files on a web page. SVG graphics are routinely smaller file sizes compared to their raster graphics brethren.

Common Use Cases and Browser Support

SVG has an avalanche of practical use cases. Let’s explore the most significant of them.

  • Plain Illustrations and Diagrams

    Any traditional drawing that may have been produced with pens and pencils should translate perfectly into the SVG format.

  • Logos and Icons

    Logos and icons often share the same need to be clear and sharp at any size – from button to billboard – making them an ideal candidate for SVG. SVG icons are more accessible and are much easier to position. For more detail, see Inline SVG vs Icon Fonts.

  • Animations

    You can create appealing animations, and even special kinds of animation, including SVG line drawings. SVG can interact with CSS animation, as well as its own built-in SMIL animation ability.

  • Interactivity (Charts, Graphs, Infographics, Maps)

    SVG can be used to plot data and update it dynamically based on user actions or some events – Interactive SVG Infographic, SVG Interactive Roadtrip Map.

  • Special Effects

    Many live effects can be achieved by using SVG, including shape morphing or different gooey effects

  • Building Interfaces and Applications

    SVG enables you can make challenging interfaces and incorporate it with HTML5, web-based applications, and rich Internet applications (RIAs).

  • And many more…

As you can see, SVG is used almost everywhere and in countless situations. The good news about all this is that browser support for SVG is getting better.

At this moment, most modern web browsers support the most important and fundamentals features of the SVG. At caniuse.com you can check the current SVG support by yourself.

SVG Browser Support

So, now you know the ‘why’ of SVG – let’s look at the ‘how’. In my next article, we’ll walk-thru the best way to use Adobe Illustrator to prepare your SVG files for the web.

More:
SVG
Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.
Is it good?Is it good?