examples from book SVG Essentials
<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;"/>
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;" />
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;" />
<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.
<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 &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.
<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 Ω</tspan></text> <text x="60" y="70">R2</text> </g>
The Greek Ω is an HTML escape character, and only displays with in-line SVG
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.
<p><img src="circuit1.svg" alt="file: circuit1.svg">
<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>
Maintained by John Loomis, last updated 13 April 2018