A Quick Guide to SVG - ThePix/QuestJS GitHub Wiki

SVG (scalable vector graphics) is a way to describe an image; a set of instructions telling the computer how to draw the picture. Each instruction can draw a line, a series of lines, a shape, some text, etc. and is called an element.

Elements very much resemble elements in HTML. This is what the text elements look like:

<text class="map-text" x="0" y="5" fill="blue">Lounge</text>

Here text is the tag name, and angle brackets are used to delineate the start tag and the end tag. "Lounge" is the content. It has a number of attributes that the browser uses to determine where to put the text and how to draw it; "map-text" is just a CSS style, while "x" and "y" give the position, and "fill" the colour.

Here are some more elements. They are a little different as they have no content. Instead of an end tag they have a slash before the angle bracket at the end to signify it is an empty element. They have a different set of attributes, as the browser needs different information. The stroke, by the way, is the line, i.e., the border of the shape.

<rect x="-66" y="34" width="32" height="32" fill="yellow" stroke="black"/>
<circle cx="14" cy="65" r="16" fill="#328" stroke="black"/>
<line x1="0" y1="80" x2="100" y2="20" stroke="black"/>
<polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black"/>
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black"/>
<ellipse cx="100" cy="50" rx="100" ry="50"/>

Polyline and polygon are a series of connected lines; polygon closes the shape, joining the last point to the first, while "rect" is short for rectangle.

For complex shapes with curves, you need to use the path element. This example creates a heart shape. The basic principle is that the "d" attribute contains a series of instructions, each being a letter usually followed by some numbers. In the example, the "M" instruction says to move to those coordinates, while the "z" at the end says close the shape. After that it gets complicated (see here for more).

<path d="M 10,30
         A 20,20 0,0,1 50,30
         A 20,20 0,0,1 90,30
         Q 90,60 50,90
         Q 10,60 10,30
         z"/>

To have the SVG text printed to the console, wich might help debugging issues, do this:

settings.reportAllSvg = true
⚠️ **GitHub.com Fallback** ⚠️