Bar med 18. okt. 2022, 19:30

2022-10-18T19:30:56Z

← Ældre version		Versionen fra 18. okt. 2022, 21:30
Linje 1:		Linje 1:
	SVG står for Scalable Vector Grapichs, og det er defineret af World Wide Web Consortiet<ref>http://www.w3.org/TR/SVG11/text.html</ref>. SVG er defineret ud fra [[XML]]-standarden.		SVG står for Scalable Vector Grapichs, og det er defineret af World Wide Web Consortiet<ref>http://www.w3.org/TR/SVG11/text.html</ref>. SVG er defineret ud fra [[XML]]-standarden.

	Formatet er dog ikke slået ordentligt igennem, og vises derfor bedst med [[FireFox]], [[Safari]] eller [[Chrome]] browseren.		Formatet er dog ikke slået ordentligt igennem, og vises derfor bedst med [[FireFox]], [[Safari]] eller [[Chrome]] browseren.

	=At tegne billeder med koder – SVG-formatet.=		=At tegne billeder med koder – SVG-formatet.=

Bar: 1 version importeret

2022-10-18T19:18:02Z

1 version importeret

Ny side

SVG står for Scalable Vector Grapichs, og det er defineret af World Wide Web Consortiet<ref>http://www.w3.org/TR/SVG11/text.html</ref>. SVG er defineret ud fra [[XML]]-standarden.

Formatet er dog ikke slået ordentligt igennem, og vises derfor bedst med [[FireFox]], [[Safari]] eller [[Chrome]] browseren.

=At tegne billeder med koder – SVG-formatet.=

Hele oversigten over definitionen for SVG står på http://www.w3.org/TR/SVG11/expanded-toc.html og den er ret omfattende – alene de 8 første kapitler handler om de grundlæggende egenskaber.

Fra Kapitel 9 begynder det at blive interessant: http://www.w3.org/TR/SVG11/shapes.html
Her kan vi tage et eksempel der tegner en blå firkant, med gul udfyldning:

[[Fil:SVG1.png]]

Hele koden der således ud:
<source lang="xml">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example rect01 - rectangle with sharp corners</desc>


<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>

<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
</svg>
</source>

Det kan virke lidt uoverskueligt, men kigger vi på koden, så er der først en indledning, som vi altid skal have med:

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

Den indledning fortæller hvordan filen skal tolkes, og der henvises til hvor standarden kan læses.

Herefter kommer starten på SVG-koden, der også angiver hvor stort billedet skal være, både i cm og i X-Y koordinater:

<source lang="xml">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
</source>

Og til sidst lukkes SVG koden med:
<source lang="xml">
</svg>
</source>

Disse rammer skal der altid være i et SVG-dokument.

Selv den blå firkant med gul udfyldning er lavet med koden:

<source lang="xml">
<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
</source>

Lige før det står følgende:
<source lang="xml">
<desc>Example rect01 - rectangle with sharp corners</desc>


<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
</source>

DESC-koden er indsat som en beskrivelse af dokumentet.

<nowiki><!—koden</nowiki> er en kommentar på hvad det næste element er.

Det næste element danner rammen (den tynde blå) rundt om hele dokumentet.
=Strukturen i koderne=
Kigger vi lidt nærmere på de enkelte koder, så har vi en type på hvert element, f.x. <rect
Det står for rectangle. Herefter har elementet en række forskellige parametre, der definerer hvordan elementet skal se ud, hvor det skal placeres osv.
Rect-elementet slutter i sig selv med />

Andre typer som desc starter med <desc> og har så noget indhold, hvor efter den sluttes med </desc>

Hele filen (på nær de 3 linjer i indledningen) skal opbygges af elementer på denne måde, men de kan til dels pakkes ind i hinanden.

==Andre koder==
Ved at bladre længere ned ad siden kan vi finde f.x. en cirkel, og ved at læse lidt i koden, så kan vi se at den er defineret som:
<source lang="xml">
<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" />
</source>

Placerer vi denne cirkel før koden med den gule firkant, så vil den ikke kunne ses, fordi den gule firkant dækker over cirklen. Placerer vi den efter den, så lægger den sig oven på.

Hvis vi gerne vil have den ved siden af, så må vi til at rette i koden:
<source lang="xml">
<circle cx="200" cy="200" r="100"
fill="green" stroke="blue" stroke-width="10" />
</source>

Her er cirklen flyttet ud til venstre for firkanten, og den er fyldt med grøn i stedet.
==Generelle ændringer på mange elementer==
Hvis vi ønsker at flytte et eller flere elementer, så kan det gøres ved at indslutte dem i en G-kode, der kunne starte med:
<source lang="xml">
<g transform="translate(300 200)">
</source>

Og efter de elementer der skal flyttes afsluttes med:
<source lang="xml">
</g>
</source>

Med transform kan man flytte som vist, men også rotere elementer med en vinkel
<source lang="xml">
<g transform="rotate(45)">
</source>

Man kan forstørre eller formindste med et skalaforhold
<source lang="xml">
<g transform="scale(0.7)">
</source>

Man kan vride elementerne med en vinkel i både X og Y ved hjælp af skew
<source lang="xml">
<g transform="skewX(30)">
<g transform="skewY(-30)">
</source>

Man kan også sætte fælles egenskaber på ved hjælp af en G-kode, hvor man her laver alle streger grønne:
<source lang="xml">
<g stroke="green" >
<line x1="100" y1="300" x2="300" y2="100"
stroke-width="5" />
<line x1="300" y1="300" x2="500" y2="100"
stroke-width="10" />
<line x1="500" y1="300" x2="700" y2="100"
stroke-width="15" />
<line x1="700" y1="300" x2="900" y2="100"
stroke-width="20" />
<line x1="900" y1="300" x2="1100" y2="100"
stroke-width="25" />
</g>
</source>

==Tekster==
Man kan naturligvis også indsætte tekst (pas dog på med de danske ÆØÅ), Det kan man finde mere om på http://www.w3.org/TR/SVG11/text.html

Et stykke tekst kan indsættes som følger:
<source lang="xml">
<text x="250" y="150"
Font-family="Verdana" font-size="55" fill="blue" >
Hello, out there
</text>
</source>

Tilbage ligger arbejdet med at lege lidt med tingene – se hvad de forskellige parametre gør ved elementerne, og så prøve at få det til at se pænt ud.
=Referencer=
<references />
[[Kategori:Fil-formater]]

SVG - Versionshistorie

Bar med 18. okt. 2022, 19:30

Bar: 1 version importeret