SVG (Scalable Vector Graphics) er en skalerbar vektorgrafikk, en spesifikasjon for todimensjonal vektorgrafikk.
SVG-filene er rene tekstfiler, som kan taes inn i en tekst-editor og redigere kommandoene manuelt.
Kode:
<svg width="140" height="140" style="border: 1px solid gray;">
<circle cx="70" cy="70" r="60" stroke="purple" stroke-width="6" fill="lime" />
</svg>
Kode:
<svg width="140" height="140" style="border: 1px solid gray;">
<rect width="120" height="120" x="10" y="10" stroke="green" stroke-width="6" fill="yellow" />
</svg>
Kode:
<svg width="150" height="150" style="border: 1px solid gray; background-color: white;">
<rect width="120" height="120" x="10" y="10" stroke="green" stroke-width="6" fill="yellow" fill-opacity="10%" rx="20" ry="20" />
</svg>
Polygoner består av rette linjer som henger sammen.
Figuren må ha minst tre sider, og er
lukket (alle linjene henger sammen).
Kode:
<svg width="250" height="250" style="border: 1px solid gray;">
<polygon points="120,40 60,208 210,108 30,108 180,208"
fill="lime" stroke="blue" stroke-width="4" />
</svg>
Kode:
<svg width="220" height="130" style="border: 1px solid gray;">
<ellipse cx="110" cy="60" rx="100" ry="50" stroke="green" stroke-width="6" fill="purple" />
</svg>
Kode:
<svg width="220" height="80" style="border: 1px solid gray;">
<line x1="10" y1="10" x2="200" y2="60" stroke="green" stroke-width="6" />
</svg>
Strekegenskapen definerer linjens farge, tekst eller omrisset av et element:
stroke (farge):
stroke-width: (bredde)
stroke-linecap: (butt, round, square).
stroke-dasharray:
Kode:
<svg width="320" height="100" style="border: 1px solid gray;">
<polyline points="20,20 40,40 100,40 50,50 200,70 270,20" fill="none" stroke="black" stroke-width="3" />
</svg>
Kode:
<svg width="320" height="40" style="border: 1px solid gray;">
<polyline points="20,20 150,20 150,10 160,20 150,30 150,20" fill="black" stroke="black" stroke-width="3" />
</svg>
Kode:
<svg width="280" height="50" style="border: 1px solid gray;">
<text x="10" y="25" fill="purple">Her er en tekst i SVG.</text>
</svg>
Kode:
<svg width="330" height="100" style="border: 1px solid gray;">
<text x="-20" y="40" fill="purple" transform="rotate(10 50,250)">Her er en rotert tekst i SVG.</text>
</svg>
Kode:
<svg width="240" height="165" style="border: 1px solid gray;">
<text x="10" y="35" fill="purple" transform="rotate(10 30,70)">
Flere linjer:
<tspan x="40" y="65" fill="red">Første linje.</tspan>
<tspan x="60" y="95" fill="blue">Andre linje.</tspan>
<tspan dx="-100" dy="35" fill="green">Tredje.</tspan>
</text>
</svg>
Kode:
<svg width="280" height="70" style="border: 1px solid gray;">
<text x="30" y="45" fill="purple" font-size="35">Stor tekst.</text>
</svg>
Kode:
<svg width="330" height="70" style="border: 1px solid gray;">
<text x="20" y="40" fill="green" font-size="40" rotate="20">Roterte bokstaver.</text>
</svg>
Kode:
<svg width="280" height="65" style="border: 1px solid gray;"
<a href="http://nilsmartin.no" target="_blank">
<text x="30" y="40" fill="blue">nilsmartin.no</text></a>
</svg>
Marker-elementer brukes for å knytte sammen
linjer, polylinjer, path og polygoner.
Kode:
<svg width="405" height="160" style="border: 1px solid gray;">
<defs>
<marker id="Pil" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto">
<polyline points="0,5 0,10 9,5 0,0 0,5" fill="black" />
</marker>
</defs>
<polyline points="60,40 130,80 230,110 340,120" fill="none" stroke="gray" stroke-width="1"
marker-start="url(#Pil)"
marker-mid="url(#Pil)"
marker-end="url(#Pil)" />
</svg>
Her er en pil (trekant) definert inne i defs.
Denne trekanten kan ombrukes til både start, i midten og slutt på linjen.
JavaScript kan brukes til å justere SVG-koden.
Kode:
<svg width="250" height="100" style="border: 1px solid gray;">
<circle id="Sirkel1" cx="40" cy="50" r="30" fill="none" stroke="purple" stroke-width="3" />
</svg>
<script>
var ny=40;
function Trill() {
ny=ny+10;
document.getElementById("Sirkel1").setAttribute("cx", ny);
}
</script>
<input type="button" value="Trill" onclick="Trill()">
Kode:
<svg width="220" height="80" style="border: 1px solid gray;">
<path d="M10 10 L200 60 Z" fill="transparent" stroke="blue" stroke-width="6" />
</svg>
Kode:
<svg width="280" height="115" style="border: 1px solid gray;">
<path
style="fill:none; stroke:purple; stroke-width:3"
d="M40 30 L40 100 L230 65 Z"
/>
</svg>
Kommandoene brukt med store bokstaver betyr absolutte posisjoner.
Små bokstaver betyr relative posisjoner.
Samme trekant med relative posisjoner (små bokstaver):
Kode:
<svg width="280" height="115" style="border: 1px solid gray;">
<path
style="fill:none; stroke:purple; stroke-width:3"
d="m40 30 v0 60 l190 -30 z"
/>
</svg>
Kode:
<svg width="360" height="180" style="border: 1px solid gray;">
<path d="M20 170 Q 60 20 300 10 " fill="transparent" stroke="blue" stroke-width="6" />
</svg>
Kode:
<svg width="360" height="180" style="border: 1px solid gray;">
<path d="M20 170 Q 65 20 300 10 T 580 170" fill="transparent" stroke="blue" stroke-width="6" />
</svg>
Tekst kan skrives langs buede linjer med textPath.
Kode:
<svg width="430" height="230" style="border: 1px solid gray;">
<path id="Buetekst" d="M70 210 Q 60 20 370 30"
fill="transparent" stroke="blue" stroke-width="1" />
<text font-size="30">
<textPath
href="#Buetekst"
startOffset="30"
textLength="35%"
lengthAdjust="spacing"
spacing="auto"
method ="stretch"
>
Bue-tekst</textPath>
</text>
</svg>
spacing | spacingAndGlyphs). exact | auto). align | stretch).
Det finnes mange svg-editorer:
Noen er nettbaserte (dvs. at en ikke trenger å laste ned og installere noe).
Sketsj er nettbasert: 🔗sketsj.no
SVG-Edit er en annen: 🔗github.com 🔗wikipedia.com
Inkscape er et program som må lastes ned og installeres:
🔗inkscape.org
🔗no.wikipedia