# 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.

```<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.

### 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

### 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"
```

We also needed to add quotes around numerical arguments:

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

```<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">
```

```<p><object data="circuit1.svg" type="image/svg+xml"