Pro tips for using scalable vector graphics

Design, Web Design

Image result for Pro tips for using scalable vector graphics

An SVG graphic can contain basic shapes, complex shapes, or both. There are six basic shapes defined in SVG <circle>, <ellipse>, <line>, <polygon>, <polyline> and <rect>.

Each shape is described, positioned and styled using SVG ‘presentation attributes’. For example, the attributes used on each of the elements in the following snippet are all SVG presentation attributes:

In addition to the basic shapes, you can create complex shapes using the SVG <path> element. An SVG <path> has a presentation attribute d – short for ‘data’ – which contains the data that defines the outline of the shape you’re drawing. The path data consists of a set of commands and coordinates that tell the browser where and how to draw the points, arcs and lines that make up the final path

Here’s an example of an SVG <path>:

<path d="M 100 100 L 300 100 L 200 300 z" fill="deepPink" stroke="#009966" stroke-width="2" />

The above path draws a rectangle by moving M to the point (100, 100), drawing a line L to the point (300, 100), then drawing another line to the point (200, 300), and closing the path z to form a triangular shape. You can learn more about the SVG <path> syntax in this article by Chris Nager – or in the SVG specification.

Part of the demo Sara Soueidan has created as a guide to SVG coordinate systems (bird illustrations by

In most cases, when you’re working with complex SVG graphics you’re likely to create these shapes in a graphics editor like Illustrator or Inkscape, then export the entire graphic as an SVG, and embed it into your page.

At first glance, exported SVGs may seem tricky because they contain a lot of code that seems intimidating at first. However, editors usually include meta data, comments and extra elements that can be safely removed without affecting the rendering result of your SVG.

As such, it is generally a good idea to optimise your SVG using one of the several optimisation tools available, to make the code cleaner. I would recommend Peter Collingridge’s online SVG editor, or the node.js-based tool SVGO. After optimising the SVG, it becomes much more readable and – more importantly – smaller.

Embedding SVGs

After creating and optimising your SVG, you can embed it in your page in a number of ways. What you want to do with your SVG will help you decide which approach to take. The six embedding techniques are:

  • <img src=”your-graphic.svg” alt=”image description” />
  • .element { background-image: url(path/to/your-graphic.svg); }
  • <object type=”image/svg+xml” data=”your-graphic.svg><!– fallback here –></object>
  • <iframe src=”your-graphic.svg”><!– fallback here –></iframe>
  • <embed type=”image/svg+xml” src=”your-graphic.svg” />
  • <svg> <!– inline svg content –></svg>
  • If you want to animate your SVG using CSS animations, you need to make sure you add the animations inside the <svg> in a <style> tag. Any animations defined externally will not work, unless you’re embedding the SVG inline in an HTML document.

    CSS interactions (such as hover) will not work if the SVG is embedded using <img>, or as a background image in CSS. For scripting with JavaScript, the <object> tag is your best bet, and even though <iframe> is similar to <object> in many aspects, controlling it from the main page’s JavaScript can be tedious.


[Source:- creativebloq]