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?
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.
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.
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.
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.
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.
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:
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.
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:
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:
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 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:
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.
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:
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:
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:
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:
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.
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.
from Creative Bloq http://www.creativebloq.com/features/all-you-need-to-know-about-svg-on-the-web