SVG tutorial for beginners

2016-01-27T18:43:00.002-08:00

SVG stands for Scalable Vector Graphics

SVG can be used to draw Vector Graphics

SVG defines Vector Graphics in XML format

SVG is an open standard (developed by W3C)

SVG graphics don't lose any quality if they are zoomed or resized

SVG can be created in many drawing app (Inkscape, Illustrator) or a text editor

Getting Started

Before we continue, it's important to read concepts relate what we are working, W3C recommends to read about [ HTML, XML-based]. This tutorial will be working with a text editor and XML-based.

Structure


1 2 3 4 5 6 7 8 9 10 11 12	`<svg` `width="100"` `height="100"` `version="1.1"` `xmlns="http://www.w3.org/2000/svg">` `<rect` `y="3"` `x="3"` `height="70"` `width="70"` `stroke="#ccd9ff"` `stroke-width="5"` `fill="#CDDC39"/>` `</svg>`

<svg width="100"
     height="100"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg">


    <rect y="3" x="3" height="70" width="70"
          stroke="#ccd9ff"
          stroke-width="5"
          fill="#CDDC39"/>

</svg>

Code shown above is a basic example of SVG graphic, we can see:

SVG graphic start with an <svg> tag

It has attributes to manage the size "width" and "height"

Attribute "version" is used to identify the version of the SVG, it doesn't affect the render

Attribute "xmlns" is a namespaces, it must always be written correctly, to avoid XML based content to be mixed, for example, both XHTML and SVG have a <title> tag (read more).

The <rect> tag is used to draw a rectangle

Fills and Strokes

Fills and Strokes are SVG objects attributes. Fill sets the color inside the object and stroke sets the color of the line around the object.

Strokes attribute have a interesting wide range of properties, for examples:

stroke-width

The stroke-width property defines the thickness of a line, text or autline of an object. The SVG graphic on the left is created by the below code.

  
<svg height="80" width="300">
  <g fill="none" stroke="#CDDC39">
    <path d="M5 20 l215 0" stroke-width="2"/>
    <path d="M5 40 l215 0" stroke-width="4"/>
    <path d="M5 60 l215 0" stroke-width="6"/>
  </g>
</svg>
 

  

<svg height="80" width="300">
  <g fill="none" stroke="#CDDC39">
    <path d="M5 20 l215 0" stroke-width="2"/>
    <path d="M5 40 l215 0" stroke-width="4"/>
    <path d="M5 60 l215 0" stroke-width="6"/>
  </g>
</svg>

stroke-linecap

The stroke-linecap property defines different types of endings to the line.The SVG graphic on the left is created by the below code.

  
<svg height="80" width="300">
  <g fill="none" stroke="#CDDC39" stroke-width="6">
    <path d="M5 20 l215 0" stroke-linecap="butt" />
    <path d="M5 40 l215 0" stroke-linecap="round" />
    <path d="M5 60 l215 0" stroke-linecap="square" />
  </g>
</svg>
 

  

<svg height="80" width="300">
  <g fill="none" stroke="#CDDC39" stroke-width="6">
    <path d="M5 20 l215 0" stroke-linecap="butt" />
    <path d="M5 40 l215 0" stroke-linecap="round" />
    <path d="M5 60 l215 0" stroke-linecap="square" />
  </g>
</svg>

stroke-dasharray

The stroke-dasharray property is used to create dashed lines.The SVG graphic on the left is created by the below code.

  
<svg height="80" width="300">
  <g fill="none" stroke="#CDDC39" stroke-width="4">
    <path d="M5 20 l215 0" stroke-dasharray="5,5" />
    <path d="M5 40 l215 0" stroke-dasharray="10,10"/>
    <path d="M5 60 l215 0" stroke-dasharray="20,10,5,5,5,10" />
  </g>
</svg>
 

  

<svg height="80" width="300">
  <g fill="none" stroke="#CDDC39" stroke-width="4">
    <path d="M5 20 l215 0" stroke-dasharray="5,5" />
    <path d="M5 40 l215 0" stroke-dasharray="10,10"/>
    <path d="M5 60 l215 0" stroke-dasharray="20,10,5,5,5,10" />
  </g>
</svg>

Shapes

SVG has some predefined tags that can be used to create shapes objects:

Rectangle <rect>

Circle <circle>

Ellipse <ellipse>

Polygon <polygon>

Path <path>

Line<line>

The below SVG shapes are examples of each tags listed. We can see the code clicked "HTML" tag or edit and test it clicked on "Edit on" Label.
See the Pen &amp;amp;amp;amp;amp;amp;amp;lt;a href='http://codepen.io/situlou/pen/xZYMyE/'&amp;amp;amp;amp;amp;amp;amp;gt;xZYMyE&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; by situlou (&amp;amp;amp;amp;amp;amp;amp;lt;a href='http://codepen.io/situlou'&amp;amp;amp;amp;amp;amp;amp;gt;@situlou&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;lt;a href='http://codepen.io'&amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt;.

Paths

The <path> tag is the most powerfull element in the SVG library, it is used to draw advances shapes combined from lines, arcs, waves and curves.

The "d" attribute of <path> tag used combination of commands to draw. List of commands:

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Bézier curve

T = smooth quadratic Bézier curveto

A = elliptical Arc

Z = closepath


1 2 3 4 5 6 7	`<svg` `width="300px"` `height="480px"` `version="1.1"` `xmlns="http://www.w3.org/2000/svg">` `<path` `stroke-width="4"` `fill="transparent"` `stroke="#CDDC39"` `d="m69,66c30,-70 55,-70 85,0s55,70 85,0"/>` `<path` `stroke-width="4"` `fill="transparent"` `stroke="#CDDC39"` `d="m60,197q85,-70 170,0"/>` `<path` `stroke-width="4"` `fill="transparent"` `stroke="#CDDC39"` `d="m84.484375,241.482414c-32.007816,96.023448 160.039079,96.023448 128.031263,0"/>` `<path` `stroke-width="4"` `fill="transparent"` `stroke="#CDDC39"` `d="m53,371l62,82l30,-70l35,72l57,-118l10,61"/>` `</svg>`

<svg width="300px" height="480px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path stroke-width="4" fill="transparent" stroke="#CDDC39" d="m69,66c30,-70 55,-70 85,0s55,70 85,0"/>
        <path stroke-width="4" fill="transparent" stroke="#CDDC39" d="m60,197q85,-70 170,0"/>
        <path stroke-width="4" fill="transparent" stroke="#CDDC39" d="m84.484375,241.482414c-32.007816,96.023448 160.039079,96.023448 128.031263,0"/>
        <path stroke-width="4" fill="transparent" stroke="#CDDC39" d="m53,371l62,82l30,-70l35,72l57,-118l10,61"/>

</svg>

Texts

The <text> tag defines a graphics element consisting of text.It is posible to apply a gradient, pattern, clipping path, mask, rotation, filter to text. The syntax is simple:


1 2 3	`<svg` `width="200px"` `height="30px"` `version="1.1"` `xmlns="http://www.w3.org/2000/svg">` `<text` `x="0"` `y="15"` `fill="black">your text.</text>` `</svg>`

<svg width="200px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <text x="0" y="15" fill="black">your text.</text>
</svg>

Conclusion

So you have finished the basic with SVG. We hope you could have learned and enjoyed this post.

Did you like what you are reading? Let me know in the comments.

Thanks for reading.


1 2 3 4 5 6 7	`<svg` `height="80"` `width="300">` `<g` `fill="none"` `stroke="#CDDC39">` `<path` `d="M5 20 l215 0"` `stroke-width="2"/>` `<path` `d="M5 40 l215 0"` `stroke-width="4"/>` `<path` `d="M5 60 l215 0"` `stroke-width="6"/>` `</g>` `</svg>`