Learning SVG

examples from book SVG Essentials

grid

<svg width=200px height=200px viewBox="-2.1 -2.1 4.2 4.2">

<line x1=-2 y1=-2 x2=2 y2=-2 style="stroke: #ccccff; stroke-width: 0.02;"/>
<line x1=-2 y1=-1 x2=2 y2=-1 style="stroke: #ccccff; stroke-width: 0.02;"/>
<line x1=-2 y1=0 x2=2 y2=-0 style="stroke: #ccccff; stroke-width: 0.02;"/>
<line x1=-2 y1=1 x2=2 y2=1 style="stroke: #ccccff; stroke-width: 0.02;"/>
<line x1=-2 y1=2 x2=2 y2=2 style="stroke: #ccccff; stroke-width: 0.02;"/>

<line x1=-2 y1=-2 x2=-2 y2=2 style="stroke: #ccccff; stroke-width: 0.02;"/>
<line x1=-1 y1=-2 x2=-1 y2=2 style="stroke: #ccccff; stroke-width: 0.02;"/>
<line x1=0 y1=-2 x2=0 y2=2 style="stroke: #ccccff; stroke-width: 0.02;"/>
<line x1=1 y1=-2 x2=1 y2=2 style="stroke: #ccccff; stroke-width: 0.02;"/>
<line x1=2 y1=-2 x2=2 y2=2 style="stroke: #ccccff; stroke-width: 0.02;"/>

Resistor

Add code to draw a resistor:

<polyline points="-0.3 0,  -0.214 0, -0.179 -0.12,  -0.107 0.12, -0.036 -0.12, 
   0.036 0.12, 0.107 -0.12, 0.179 0.12, 0.214 0, 0.3 0  " 
style="stroke: black; fill: none; stroke-width: 0.03;" />

Multiple Resistors using groups, and additional wire

By defining a group, we can specify a style for the objects in the group:

<g id="grid"; style="stroke: #ccccff; stroke-width: 0.02;">
<line x1=-2 y1=-2 x2=2 y2=-2 />
<line x1=-2 y1=-1 x2=2 y2=-1 />
<line x1=-2 y1=0 x2=2 y2=-0 />
<line x1=-2 y1=1 x2=2 y2=1 />
<line x1=-2 y1=2 x2=2 y2=2 />

<line x1=-2 y1=-2 x2=-2 y2=2 />
<line x1=-1 y1=-2 x2=-1 y2=2 />
<line x1=0 y1=-2 x2=0 y2=2  />
<line x1=1 y1=-2 x2=1 y2=2  />
<line x1=2 y1=-2 x2=2 y2=2  />
</g>

We can also use groups in the equivalent of a hyperlink:

<g id="resistor">
<polyline points="-0.3 0,  -0.214 0, -0.179 -0.12,  -0.107 0.12, -0.036 -0.12, 
   0.036 0.12, 0.107 -0.12, 0.179 0.12, 0.214 0, 0.3 0  " 
style="stroke: black; fill: none; stroke-width: 0.03;" />
</g>

<use xlink:href="#resistor" transform="translate( 1 1) rotate( 90)"/>

<polyline points="0.3 0, 1 0, 1 0.7" style="stroke: black; fill: none; stroke-width: 0.03;" />

Use <defs> with resistor symbol

<defs>
<symbol id="resistor" style="stroke: black; fill: none; stroke-width: 0.03;">
<desc>resistor symbol</desc>

<polyline points="-0.3 0,  -0.214 0, -0.179 -0.12,  -0.107 0.12, -0.036 -0.12, 
   0.036 0.12, 0.107 -0.12, 0.179 0.12, 0.214 0, 0.3 0"/>
</symbol>
</defs>

Then use xlinks to draw the resistors:

<use xlink:href="#resistor" transform="translate( 0 -1)"/>

<use xlink:href="#resistor" transform="translate( 1 1) rotate( 90)"/>

<g id="wires" style="stroke: black; fill: none; stroke-width: 0.03;">
<polyline points="0.3 -1, 1 -1, 1 0.7"  />
</g>

This avoids having to actually draw the object at the origin.

resistor symbol

Add text

<use xlink:href="#resistor" transform="translate( 0 -1)"/>
<text x="-0.5" y="-0.6" style="font-family: sans-serif; font-size: 0.25;
    stroke: none; fill: black;">R1
    <tspan x="-0.5" dy="0.3">100 &amp;Omega;</tspan></text>

<use xlink:href="#resistor" transform="translate( 1 1) rotate( 90)"/>
<text x="1.3" y="1.2" style="font-family: sans-serif; font-size: 0.25;
    stroke: none; fill: black;">R2</text>

Text worked on Google Chrome, but not on Internet Explorer.

resistor symbol R1 100 Ω R2

Rescale Text Objects

<desc>labels</desc>

<style type="text/css"><![CDATA[
      text { font-family: sans-serif; font-size: 10pt;
    stroke: none; fill: black; }
    ]]></style>

<g transform="scale(0.02)">
<text x="-20" y="-20">R1
    <tspan x="-20" dy="15">100 &Omega;</tspan></text>

<text x="60" y="70">R2</text>
</g>

The Greek Ω is an HTML escape character, and only displays with in-line SVG

circuit1 Simple circuit example resistor symbol labels R1 100 Ω R2

Referencing an svg file

The syntax is picky-we needed the following header:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200px" height="200px" viewBox="-2.1 -2.1 4.2 4.2"
	xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink">

We also needed to add quotes around numerical arguments:

<line x1="-2" y1="-2" x2="2" y2="-2" />

instead of

<line x1=-2 y1=-2 x2=2 y2=-2 />

Here is a svg file without quotes around one element. It opens an empty page on Explorer and an error page on Google Chrome

There are several possiblities for referencing the SVG file.

  1. Open as an image

    <p><img src="circuit1.svg" alt="file: circuit1.svg">
    

    file: circuit1.svg

  2. Use a hyperlink

    link to circuit1.svg

  3. Open as an object

    <p><object data="circuit1.svg" type="image/svg+xml"
           alt="circuit drawing" >
        <!-- As a fallback, include text or a raster image file -->
        <p>No SVG support!</p>
      </object>
    

    No SVG support!


Maintained by John Loomis, last updated 13 April 2018