SVG

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

SVG står for Scalable Vector Grapichs, og det er defineret af World Wide Web Consortiet[1]. 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:

SVG1.png


Hele koden der således ud:

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

  <!-- Show outline of canvas using 'rect' element -->
  <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>

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

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

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:

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

Og til sidst lukkes SVG koden med:

</svg>

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

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

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

Lige før det står følgende:

<desc>Example rect01 - rectangle with sharp corners</desc>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

DESC-koden er indsat som en beskrivelse af dokumentet.

<!—koden 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:

  <circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  />

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:

  <circle cx="200" cy="200" r="100"
        fill="green" stroke="blue" stroke-width="10"  />

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:

<g transform="translate(300 200)">

Og efter de elementer der skal flyttes afsluttes med:

</g>

Med transform kan man flytte som vist, men også rotere elementer med en vinkel

<g transform="rotate(45)">

Man kan forstørre eller formindste med et skalaforhold

<g transform="scale(0.7)">

Man kan vride elementerne med en vinkel i både X og Y ved hjælp af skew

<g transform="skewX(30)">
<g transform="skewY(-30)">

  Man kan også sætte fælles egenskaber på ved hjælp af en G-kode, hvor man her laver alle streger grønne:

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

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:

<text x="250" y="150" 
      Font-family="Verdana" font-size="55" fill="blue" >
  Hello, out there
</text>

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