nilsmartin.no

 nilsmartinno 

 

SVG (Vektorgrafikk)

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.


Sirkel

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>

En SVG-kommando begynner med nøkkelordet
<svg> med angivelse av bredde og høyde inkludert.
</svg> avslutter kommandoen.
circle-elementet brukes for å tegne en sirkel.
– cx og cy angir sentrum og r er radius.
– stroke og stroke-width angir farge og bredde på omrisset.
– fill angir fargen.

 

 

Firkant

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>

rect-elementet brukes for å tegne en rektangel-firkant.
– width og height angir høyde og bredde.
– x og y angir posisjonen øverst til venstre.
– stroke og stroke-width angir farge og bredde på omrisset.
– fill angir fargen.

Rund firkant

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>

– rx og ry gir avrundede hjørner.
– fill-opacity (gjennomsiktighet) attributtet går fra 0% til 100%.

 

 

Stjerne med polygon

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>

polygon-elementet kan brukes for å tegne en stjerne.
points attributtet gir x og y koordinatene for hvert hjørne.

 

 

Ellipse

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>

ellipse-elementet brukes for å tegne ellipser.
– cx og cy angir sentrum (samme som sirkelen).
– rx og ry angir horisontal og vertikal radius.
– stroke og stroke-width angir farge og bredde på omrisset.
– fill angir fargen.

 

 

Linje

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>

line-elementet brukes for å tegne en linje.
– x1 og y1 angir start.
– x2 og y2 angir sluttpunktet.

Strekegenskapen

Strekegenskapen definerer linjens farge, tekst eller omrisset av et element:

stroke (farge):

stroke-width: (bredde)

stroke-linecap: (butt, round, square).

stroke-dasharray:

 

 

Polylinje

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>

polyline-elementet brukes for å tegne en figur som består av rette linjer.
– points angir punktene langs linjen.

Pil med polyline

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>

polyline-elementet kan brukes for å tegne en pil.

 

 

Tekst

Her er en tekst i 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>

text-elementet kan brukes for å lage en tekst.
– Det er mulig å manipulere teksten på ulike måter, f.eks. rotasjon.

Rotert tekst

Her er en rotert tekst i 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>

transform kan brukes for å rotere.
rotate(10 50,250) roterer ti grader om punktet 50,250.

Tekst over flere linjer

Flere linjer: Første linje. Andre linje. Tredje.

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>

Tekst over flere linjer med tspan-elementet.
dx og dy er relativt til forrige tekst-posisjon.

Stor tekst

Stor tekst.

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>


Roterte bokstaver

Roterte bokstaver.

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>

 

 

Tekst-lenker

nilsmartin.no

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>

Tekst-lenk med a-elementet.

 

 

Piler med marker

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.

Marker-elementet:
defs er definisjoner.
orient gir orienteringen.
refX og refY angir tilknytningspunktet.

 

 

Javaskript - animasjon

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()">

 

 

Linje med path

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>

Path-elementet:
d er definisjonen.
M (moveto) flytter til posisjonen 10 10.
L (lineto) tegner en linje til 200 60.
Z (closepath) lukker linjen.

Trekant med path

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>

M (moveto) flytter til posisjonen 40 30.
L (lineto) tegner en linje til 40 100,
og videre til 230 65.
Z (closepath) lukker linjen.

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>

m (moveto) flytter til posisjonen 40 30.
v tegner en vertikal linje til 0 60,
l (lineto) tegner en linje videre til 190 -30.
z betyr det samme som stor Z.

 

 

Buede linjer med path

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>

Q angir et punkt som strekker linjen (kvadratisk bezierkurve).

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>

T fortsetter linjen til et nytt punkt, med automatisk nytt kontrollpunkt basert på det første.

Andre kurve-kommandoer:
H lager en horisontal linje.
C lager en kurve.
S lager en jevn kurve.
A lager en eliptisk bue.

 

 

Tekstbuer med textPath

Tekst kan skrives langs buede linjer med textPath.


Bue-tekst

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>


Attributter:
href  er en URL til linjebuen.
startOffset  er hvor teksten starter  (lengde, % eller et tall).
textLength  er lengden langs buen  (lengde, % eller et tall).
lengthAdjust  krymper eller strekker teksten  (spacing | spacingAndGlyphs).
spacing  er mellomrom mellom bokstaver  (exact | auto).
method  (align | stretch).

 

 

SVG-editorer

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

 

 

Ordliste

Animasjon  –  kan gjøres med JavaScript.
Se også:  Animasjon  JavaScript 
Canvas  –  er et skjermområde å tegne i.
Se også:  Canvas    HTMLordbok.html 
CSS  –  Cascading Stylesheets.
Se også:  CSS  Hjemmeside  HTML    CSS.html   Internettordbok.html  CSSordbok.html 
Hjemmeside  –  består av en domenenavn (nettadresse) og et web-hotell (diskplass) der filene er.
Se også:  Hjemmeside  CSS  HTML  JavaScript    Hjemmeside.html  Internettordbok.html 
HTML  –  Hyper Text Markup Language.
Se også:  HTML  CSS  Hjemmeside    HTML.html  Internettordbok.html 
JavaScript  –  brukes til å programmere websider.
Se også:  JavaScript  Animasjon  CSS  Hjemmeside  HTML  SVG    Javaskript.html  Internettordbok.html 
Nettleser  –  Surfeprogram.
Se også:  Nettleser  CSS  HTML    Internettordbok.html 
Path-elementet  –  kan brukes til å tegne buede linjer.
Kommandoer:
d er definisjonen.
M (moveto) flytter til posisjonen.
L (lineto) tegner en linje.
H lager en horisontal linje.
C lager en kurve.
S lager en jevn kurve.
A lager en eliptisk bue.
T fortsetter linjen til et nytt punkt, med automatisk nytt kontrollpunkt basert på det første.
Z (closepath) lukker linjen.
m (moveto) flytter til en relativ posisjon.
v tegner en relativ vertikal linje.
l (lineto) tegner en relativ linje.
z betyr det samme som stor Z.
H lager en horisontal linje.
C lager en kurve.
S lager en jevn kurve.
A lager en eliptisk bue.
– Kommandoer med store bokstaver betyr absolutte posisjoner.
Små bokstaver er relative.
Se også:  Path 
PHP  –  er et programmeringsspråk som brukes på de fleste nettsteder.
Se også:  PHP  WordPress    PHP-ordbok  Internettordbok.html 
Polygon  –  kommer fra gresk.
"Poly" betyr ‹mange› og ‹gon› betyr ‹kant›.
Se også:  Polygon 
SVG
SVG  –  Scalable Vector Graphics spesifiserer en todimensjonal vektorgrafikk for web.
Åpen standard utviklet under W3C Process.
Royalty-fri.
Leverandøruavhengig.
Lisensfritt.
Veldokumentert.
Bred applikasjonsstøtte. Alle moderne nettlesere støtter formatet direkte.
Støtter gjennomsiktighet, animasjon, skripting, komprimering, interaktivitet, hyperlenking, stilsett.
SVG-filene er rene tekstfiler, som en kan ta inn i en tekst-editor og redigere kommandoene manuelt.
SVG-standarden spesifiserer en XML-basert filformat som inneholder beskrivelser av todimensjonal vektorgrafikk, basert på matematiske uttrykk.
Vektorgrafikk kan skaleres uten tap av oppløsning.
SVG kan manipuleres ved hjelp av JavaScript
Det er mulig å lage animasjoner basert på SVG.
1999. Utviklingen innen W3C startet.
04.09.2001. Versjonsnummer 1.0.
14.01.2003. Versjonsnummer 1.1.
28.08.2012. SVG 2.0 ble tilgjengelig fra W3C. Det er en opprydding av spesifikasjonen ved at lite brukte elementer er fjernet. Noe ny funksjonalitet er lagt til. Bedre brukervennlighet i språket.
Lenk: w3.org 
Se også:  SVG  CSS  HTML  JavaScript  XML    Internettordbok.html 
WordPress  –  er et verktøy for å redigere vevsider.
Se også:  WordPress    WordPress.html 
XML  –  Extensible Markup Language.
Se også:  XML  HTML  CSS    Internettordbok.html