- 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" <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.
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> |
<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.
1 2 3 4 5 6 7 | <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.
1 2 3 4 5 6 7 | <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:
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.
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Polygon <polygon>
- Path <path>
- Line<line>
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 | <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 | <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.
0 comentarios: