It's taken a while, but SVG is now widely supported across all major browsers and devices. SVG files are super small, searchable, modifiable – via code – and scalable. They look great at all sizes and can be used just like images or inline right in your HTML.

If you're still using PNGs for logos, icons and interactive elements on your site, it's about time that you got with the programme and switched up to SVG. Here's everything you need to know about introducing some vector love into your designs.

Why use SVG?

SVG on the web: Raster vs vector

Raster images look good at their original size, but vectors scale up perfectly

When it comes to logos, icons, interface elements and vector-based artwork that you'd like to look crisp, animate or make responsive, there are plenty of reasons to use SVG.

Pixel-perfect scaling
Using PNGs or rasterised images means you are restricted to pixels. It also means you are likely to have multiple images for various retina devices or resolutions. SVG is not affected by resolution or whether or not you have a retina display. SVG images scale and always look perfect because they are drawn with code, not pixels. 

Modifiable
SVG can be animated and styled with CSS. You can change colours, sizes, fonts and so much more. Elements within the SVG can be responsive as well to use interaction. Animations that you use on HTML elements can also be used on SVG elements.

Small file size
PNGs can get large very quickly, especially when you need high-definition. The larger the file size, the longer it takes to load and to render. JPGs are better but also large. That means slower sites. SVG is just code, which means very small file sizes. Use it for icons, logos and anything that can be created as vector art.

Accessibility
SVG files are text-based and can be searched and indexed. This makes them readable by screen readers, search engines and other devices. Each element within the SVG is also accessible for search and manipulation.

What is SVG used for?

SVG is heavily underused, partly because it took a long time to achieve widespread support across browsers. If you need fast, responsive experiences, SVG can make dramatic improvements to your site. There are plenty of great use cases for SVG, such as:

Logos and icons
Logos and icons often share a need to be clear and sharp at any size. Whether it's a simple button or a large, screen-filling billboard, you want the quality consistent and crisp. SVG enables precise control of every shape, line and element. SVG icons and logos are more accessible, which means they're easier to position and manipulate in real-time.

Charts, graphs and infographics
SVG can be updated dynamically to plot data based on user actions or other data-driven events. This makes SVG perfect for things like interactive maps or graphics that illustrate data.

Visual effects
Many real-time visual effects can be created using SVG, including shape morphing and transitioning from one shape to another. You can transform letters into shapes, logos into other logos and much more.

Animations
SVG can work with CSS animations, so you don't have to learn new animation skills. SVG can also use its own built-in SMIL animation ability, which is even more robust if you want to make really creative results.

Traditional drawings and illustrations
Many traditional illustrations translate really well to SVG, provided they are not overly complex. Sketches and diagrams to explain features of a product or illustrate a concept can work very well.

Interfaces and applications
SVG is ideal for complex interfaces that can be integrated with web-based applications and rich internet applications (RIAs). They are lightweight, easy to animate, and each element can capture user interaction events.

Next page: Working with SVG

There are several ways you can use SVG on your webpages. Let's have a look at how a few of these work.

Use the <img> Tag

To embed an SVG via an <img> element, you just need to reference it in the src attribute as you would with any image. You should define a height and width as well, the same as when you add images. Here is an example of what the HTML code looks like:

The advantages to this method are that it is very quick and easy to add. You can also wrap it in an <a> tag to make it a hyperlink like a regular image. You can use CSS to affect the SVG image the same as any other, but you cannot use JavaScript or external CSS to manipulate the content of this image. You can still use inline CSS in the SVG code itself if you edit the SVG code.

Use SVG in CSS

SVG images can be used as background-image in CSS as well, just like PNG, JPG or GIF images. Here is an example of including an SVG image in CSS:

The advantages of SVG, such as crispness at any size, are retained with this method. You can also do anything a raster graphic can do, like repeat, scale, position and more.

Inline SVG in HTML

You can also open up the SVG file in any text editor, copy the SVG code and paste it into your HTML document. We call this inlining SVG or using it inline. SVG code elements begin and end with the <svg></svg> tags. Here is a simple example of what you could paste into your document:

Putting your SVG inline saves HTTP requests and therefore can reduce your loading time. You can assign classes and ids to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any SVG presentation attribute as a CSS property.

Coding SVG

SVG uses an XML-based language for describing vector images. It's a markup language, like HTML, except that you have a wide variety of elements for defining the shapes to create these images, along with effects to apply to these shapes as well.

You can code SVG right along with your HTML in your favourite code editor. You can code them as separate files and include them, or you can code them inline in your HTML. As a simple example, the following code creates a circle and a rectangle:

Next page: Making shapes

SVG makes it easy to create a number of basic shapes:

Circles

SVG on the web: Circles

It takes just three attributes to draw a circle

There are three attributes to use to create a circle. They include:

  • r – The radius of the circle.
  • cx – The x position of the centre of the circle.
  • cy – The y position of the centre of the circle.

The code to draw a circle is very easy to use. You can set the stroke colour and fill colour inline or separately as well. Here's an example:

Rectangles

SVG on the web: Rectangles

Rectangles are just as easy to draw

In a similar way to making circles, you can create rectangles, using x and y for position, then height and width attributes to define the size. The code looks like this:

Lines

SVG on the web: Lines

To draw a straight line you simply need the coordinates of its start and end points

Lines in SVG are for straight lines. They take as attributes two points that specify the start and end point of the line. Here's an example:

Polygons

SVG on the web: Polygons

For polygons you just have to list the coordinates of each of their points

You can also create any kind of polygon shape using the polygon element, which will conveniently return to the first point for you after the end of your list of points. Here's a quick example of drawing a polygon:

Making paths and curves

The <path> element is extremely powerful for making shapes. You can use it to create lines, curves, arcs and more. You can even use it with text to create text that flows along paths.

Drawing lines 

SVG on the web: Drawing lines

Use the path element to string multiple lines together

To draw a line or curve, you use the path element and define the path using the d attribute. You can move the start of a line using the M command for absolute positioning and the lower case m for relative positioning. You use the L command to draw a line to a new point. Here is a quick example of a line:

Here is an example of multiple lines, to show you how easy it is:

Drawing curves 

SVG on the web: Drawing curves

You can also use the path element to draw curves

You can also use the C command to draw curves.  Use the M command to set the start position, and then list the start, the anchor point and the end point like this:

You can also string curves together using the S command  to make even more complex curves like this:

There are plenty of curves and paths you can create. There is a great resource for learning even more about paths here.

Next page: Text and CSS styles

Making text is easy in SVG. You use the <text> tag to define it. Here is an example:

SVG on the web: Text

This, quite simply, is text

The x and y determine the position of the text. Like with the shape elements, text can be colourised with the fill attribute and given a stroke with the stroke attribute. You can even use gradients and patterns as strokes and fills.

Setting font properties

Each of the following properties can be set as an attribute or via a CSS declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration.Like the <span> elements <tpsan> can also be used to select web sections of your text. A typical use-case might be to bold some text like this:

SVG on the web: font properties

Use an attribute or CSS declaration to set font properties

You can also set strokes, fills, rotations, direction and much more. Here is a quick example of setting the text to draw outlines only, and to switch the direction of the text:

SVG on the web: more font properties

There are plenty of font options to play with

We use the direction style and set it to rtl, which means right to left. We also have to set the unicode-bidi style to bidi-override.

Using textPath

This element uses the xlink:href attribute to connect to a path and aligns the characters along this path. This enables you to draw virtually any path you wish, and then attach your text to it, so it follows it. Here's an example:

CSS and SVG

You can use CSS styles inline, inside SVG elements. Here is an example:

You can also use CSS separately, just like with any other elements on your page. For example, if you set a class attribute on your SVG shape, you can set its colour through regular CSS like this:

And the CSS would be:

Notice we had inline colouring that we then overrode with our CSS. Pretty cool!

What about SVG 2?

SVG 2.0 is currently in candidate recommendation stage, which means it is not supported by browsers yet, and it may still be some time before it is. It boasts numerous improvements and features. It also removes or deprecates some features of SVG 1.1 and incorporates new features from HTML5 and Web Open Font Format.

SVG 2.0 removes several font elements, such as glyphs, and they are replaced by the WOFF font format. Also the xml:space attribute is deprecated in favour of CSS.

It reached candidate recommendation stage on 15 September 2016. The latest draft was released on 18 October 2018. You can read more about it and follow its progress here.

This article was originally published in issue 282 of creative web design magazine Web Designer. Buy issue 282 here or subscribe to Web Designer here.

Related articles:

from Creative Bloq http://www.creativebloq.com/features/all-you-need-to-know-about-svg-on-the-web

All you need to know about SVG on the web
Tagged on:

Leave a Reply

Your email address will not be published. Required fields are marked *