If you’re completely new to SVGs, it may help to read the following articles first:
- Scalable Vector Graphics: an Overview
- 7 Reasons to Consider SVGs Instead of Canvas
SVG Co-ordinate Grid
An SVG is defined in whatever coordinate space you give it. That space does not necessarily correlate with pixels, centimeters, inches, or other absolute units, because an SVG can be scaled to any dimension.
The SVG’s viewBox attribute determines the co-ordinates the image uses. The following SVGs would look identical when scaled to the same size:
a viewBox
of 0,0
to 200,100
with a line from 0,0
to 100,50
a viewBox
of 0,0
to 300,150
with a line from 0,0
to 150,75
a viewBox
of 0,0
to 30,15
with a line from 0,0
to 15,7.5
(fractions of a unit are permitted)
SVG XML Document
An SVG image is an XML document that follows strict conventions (closing tags, quoted attributes, etc). When SVGs were first developed in 1999, files required an XML declaration and DOCTYPE at the top of the document above the root <svg>
element:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="https://www.w3.org/2000/svg">
<!-- image data -->
</svg>
You may still encounter this format, but it’s more usual for .svg files to use a single root element:
<svg xmlns="https://www.w3.org/2000/svg">
<!-- image data -->
</svg>
Also visit: Best Web Hosting Review Site
Grouping Elements
Any set of elements (lines, circles, rectangles, text, etc.) can be grouped using <g>...</g>
tags. In essence, it’s similar to grouping drawing objects in a graphics package so they can be manipulated as a single item.
For example, you could define a root group node so the whole image can be manipulated via JavaScript or CSS:
<g id="main">
<!-- drawing elements to go here -->
</g>
A single group can have any number of inner groups with nesting as necessary.
Lines
A single line between two points is drawn using the line element:
<line x1="10" y1="10" x2="100" y2="200"
stroke="#999" stroke-width="5" stroke-linecap="round" />
Polylines
Polylines define a set of connected straight line segments:
<polyline points="580,10 560,390 540,200 520,390 400,390"
stroke="#c00" stroke-width="5" stroke-linecap="round"
stroke-linejoin="round" fill="none" />
Read more on SitePoint
Thanks
Top comments (0)