The complete guide to SVG

Writing SVG for the web

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.

Basic Shape Tags

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.

Text Tag

The text tag (<text>) is used to create text inside of SVG, which will be selectable and accessible just like any text in HTML. 

Accessibility Tags

The title (<title>) and description (<desc>) tags are specifically for providing accessibility content and will not be rendered on the screen.

Group Tag

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.

Defs Tag

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

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