programmerare
(på fritiden)
För att rita med SVG behövs en kod-editor. Jag använder Visual Studio Code (VSC) vilken är en gratis editor skapad av Microsoft. För enkla tips på hur man kan komma igång med VSC finns Dev Eds video.
Nedan finns kod för olika former skrivna i en enkel editor. Där kan värden på parametrarna som finns ändras och resultatet visas. Rutnätet som finns i editorn har 10 enheter mellan varje tunt streck och 100 mellan de tjockare strecken:
SVG är ett XML språk för att rita och visa vektorgrafik. Filerna är generellt mindre än bitmap filer vilket
resulterar i att de går snabbare att ladda.
Grafiken kan skalas för att passa olika visningsenheter utan att bli pixliga.
Grundläggande grafiska former
är:
<line>, <circle>, <rect>, <ellipse>,
<polyline>, <polygon>, <text>, och <path>.
För att rita SVG objekt i ett HTML dokument måste man starta med:
<svg xmlns="http://www.w3.org/2000/svg">
DIN KOD GÅR HÄR
</svg>
Inne i den inledande svg-taggen kan du definiera bredd (width), höjd (height) och viewBox
vilket är ett relativiserat koordinatsystem inom SVG.
Former definieras innanför < och > tecken. För att rita en linje måste man definiera två punkter, (x1, y1)
och (x2, y2), som parametrar. En rät linje ritas ut mellan dessa punkter
stroke-width är tjockleken
på linjen
och stroke är färgen på linjen.
Man kan ange färg i olika format såsom namn ("pink"), rgb (255, 192, 203) eller hex (#FFC0CB).
stroke-linecap anger hur ändarna på linjen ska se ut. Valen är butt, round eller square. butt är det värde som gäller om ingen stroke-linecap anges.
Ändra värdena i editorn och klicka på knappen "Uppdatera resultat" för att testa egen kod
<line x1="100" y1="100" x2="300" y2="100"
stroke-width="15" stroke="orange" stroke-linecap="round">
circle tar tre parametrar, cx och cy för position på cirkelns centrum och r för
cirkelns radie.
En sluten form kan färgläggas med fill
<circle cx="200" cy="150" r="50" fill="rgb(255 0 255)" stroke-width="3" stroke="blue">
Rektangel deinieras med en punkt, (x, y), vilken är det övre vänstra hörnet på rektangeln, och width
och height.
rx och ry är valfria och deinierar radien på raktangelns hörn.
<rect x="100" y="100" width="200" height="150" rx="10" ry="10"
fill="#FF00FF" stroke="aqua" stroke-width="5">
Man kan kapsla in SVG elements inuti ett annat element om de ska positioneras som en collection
Genom att bestämma x-positionen i svg-taggen kan samma rektangel (eller annan form) använda samma kod och bli
positionerade olika. Det samma gäller för att bestämma y-position för svg-taggen.
<svg x="10"> <rect x="10" y="10" height="100" width="100"
style="stroke:yellow; fill: aqua"/> </svg>
<svg x="200"> <rect x="10" y="10" height="100" width="100" style="stroke:#33A532; fill: #90EE90"/></svg>
ellipse tar fyra parametrar, cx och cy för position av centrum på ellipsen och
rx och
ry för x- och y-radie av ellipsen.
Här har ellipsen ingen stroke men det kan man använda även på denna form. Prova att lägga till stroke och
stroke-width för att se hur stroke påverkar ellipsens storlek. läggs stroke till innanför ellipsen, utanför
ellipsen eller hälften på varje
sida?
<ellipse cx="200" cy="150" rx="100" ry="50" fill="red">
polyline är en grupp av linjer som ansluter till varandra. Punkterna som definierar linjerna skrivs i ett attribut som heter points. x och y för varje point skrivs med ett komma mellan dem och ett mellanslag innan nästa point definieras. Som standrad färgas fältet mellan den första och sista punkten svart. För att motverka detta kan man använda fill = "none".
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
stroke="blue" stroke-width="4" fill="#FF0000">
polygon är precis som polyline ett antal linjer som ansluter till varandra. Polygonens första och sista punkt ansluter automatiskt till varandra och en sluten form skapas.
<polygon points="100,80 250,190 160,210"
stroke="orange" stroke-width="4" fill="#00FF00">
text positioneras av sitt x- and y-värde som en startpunkt. y-värdet anger nedre
vänstra hörnet av texten (inte övre vänstra hörnet som på rekangeln).
För att flytta var y-värdet
beräknas från kan man använda text-anchor. Värden som kan användas för att text-anchor är start,
middle och end. Detta flyttar altså y-värdets position till börjam, mitten eller slutet på texten medan
x-värdet
ligger kvar i nederkant av texten.
Rotation och font-size som
exemplet nedan visar. För fler alternativ gällande text kan du se i den fantastiska tutorialen
Jenkov.com
För att rotera anges värden i grader samt rotationspunkten i x- och y-led.
All rotation är medurs när positiva grad-tal anges och moturs när negativa grad-talal anges. Grader kan anta
värden mellan -360 till 360.
<text x="20" y="40" stroke="orange" stroke-width="2" font-size ="40px" transform="rotate(30 20,40)" fill="white" text-anchor="start" >Example SVG text</text>
path är det mest användbara elementet av dem alla. Det skapar komplexa former genom att kombinera kurvor
och linjer.
path inleds med ett d vilket står för data. Efter det kommer kommandona föregågna av en bokstav.
Stor bokstav anger en Absolut referens medan liten bokstav anger en relativ referens (relativ till senaste
punkt som angivits.)
Nedanför nästa editor finns en beskrivning av respektive bokstav.
Mer att läsa om Bezier-kurvor
<path d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"
fill="pink" stroke="purple">