Discover why you should be using Scalable Vector Graphics and how to design and implement them.
Writing SVG for the web
This demo by Vincent Hardy: a synchronised audio and graphic animation combining SVG, JavaScript and a simulated 'camera'
As SVG is an XML language it looks very similar to HTML, where tags are nested, and it is written using those recognisable angled brackets.
Even though most of the time you'll likely be using software to output your SVGs, it's still worth learning the basic tags. Learning these tags will allow you optimise and make quick adjustments to any element in your SVG. You'll likely need this knowledge to utilise filters, effects, patterns, masks and animation.
SVG gives designers the abilities they once had with the soon-to-be-defunct Flash. But, this time around, the content is accessible to screen readers and supported natively within the browser.
SVG has tags for all of the basic shapes; rectangles and squares (<rect>), circles (<circle>), ellipse (<ellipse>), line (<line>), polyline (<polyline>), polygon (<polygon>) and path (<path>).
These tags are used to create most elements inside SVG.
The group tag (<g>) is very useful in SVG. This tag is used to group elements together allowing you to add class names and apply animations, filters, patterns and effects to a group of elements.
The defs tag (<defs>) is used to define elements for later reuse. This is where you create patterns, filters and masks to be reused later. This is also used to create icon systems.
How to set SVG up for the web
This demo from Vincent Hardy combines SVG, web fonts and the audio tag to create a visually pleasing animation of lyrics
01. Export the SVG
Export the file from your graphics editor, we'll be using a simple landscape drawing in SVG created by Steven Roberts. Both Sketch and Illustrator will export images as an SVG as well as many other editors.
02. Trim the fat
After you've exported the file open it in your choice of IDE or text editor. From here you can remove the unwanted tags and comments and update the accessibility tags.
03. SVGO
SVGO is a optimisation tool that runs on the command line, this tool is really useful and has a number of options available to the user to choose how to best optimise any given SVG.
04. SVGOMG
The only problem with SVGO is that you cannot see if the changes you're making during optimisation are making visual changes to the image. SVGOMG runs in the browser and visually shows you the changes you're making.
05. Optimise
Using the web app you need to import the SVG – either the file or by copying the markup from the editor and pasting it in. From here you're presented with a multitude of options allowing you to quickly turn them on and off while visually seeing the changes being made.
06. Export the file again
The more you play with SVG and depending on your intentions for any particular SVG you will want the settings to differ slightly. The editor shows you how much the file size has changed right next to the download button. Once you're happy with the settings, click the download button to export the file.
Next: SVG filters and effects
Thank you for reading 5 articles this month* Join now for unlimited access
Steven is a digital creative from Stockton-on-Tees, UK. An experienced Head of UX, Steven has written a number of articles on web design and front-end development, as well as delivering a talk at CSSConf Budapest on the potential of CSS animations. He is currently Head of UX at Aero Commerce.
