Rita medSVG

programmerare
(på fritiden)

portrait drawing

På den här sidan visar jag hur man kan rita olika enkla former med SVG.

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:

Scalable Vector Graphics (SVG)

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.

Line

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

SVG Code

Results

<line x1="100" y1="100" x2="300" y2="100" 
stroke-width="15" stroke="orange" stroke-linecap="round">
  
           

Circle

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

SVG Code

Results

<circle cx="200" cy="150" r="50" fill="rgb(255 0 255)" stroke-width="3" stroke="blue">
           

Rectangle

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.

SVG Code

Results

<rect x="100" y="100" width="200" height="150" rx="10" ry="10" 
fill="#FF00FF" stroke="aqua" stroke-width="5">
           

Nested Elements

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 Code

Results

<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

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?

SVG Code

Results

<ellipse cx="200" cy="150" rx="100" ry="50" fill="red">
           

Polyline

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

SVG Code

Results

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
stroke="blue" stroke-width="4" fill="#FF0000">
           

Polygon

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.

SVG Code

Results

<polygon points="100,80 250,190 160,210"
stroke="orange" stroke-width="4" fill="#00FF00">
           

Text

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.

SVG Code

Results

<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

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

SVG Code

Results

<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">
   
           
Command:
M, m
Name:
moveto
Parameters:
x,y
Description:
Flyttar pennan till punkt utan att rita
Command:
L, l
Name:
lineto
Parameters:
x,y
Description:
Ritar en linje till punkt från föregående punkt
Command:
H, h
Name:
horizontal
lineto
Parameters:
x
Description:
Ritar en horizontell linje från nuvarande punkt
till specifierad punkt
Command:
V, v
Name:
vertical
lineto
Parameters:
y
Description:
Ritar en vertikal linje från nuvarande punkt
till specifierad punkt
Command:
Q, q
Name:
quadratic
Bezier
Parameters:
x1,y1 x,y
Description:
Ritar en kvadratisk Bezier-kurva från nuvarande punkt till x och y
De andra punkerna avgör kurvans böjning
Command:
T, t
Name:
smooth
quadratic
Bezier
Parameters:
x,y
Description:
Ritar en kvadratisk Bezier-kurva från nuvarande punkt till x och y.
Kontrollpunkter antas vara samma som
senast använda kontrollpunkter
Command:
C, c
Name:
curveto
(cubic Bezier)
Parameters:
x1,y1 x2,y2
x,y
Description:
Ritar en kubisk Bezier-kurva från nuvarande punkt till x och y.
De andra punkerna avgör kurvans böjning
Command:
S, s
Name:
smooth
curveto
(cubic Bezier)
Parameters:
x2,y2
x,y
Description:
Ritar en kubisk Bezier-kurva från nuvarande punkt till x och y.
x2,y2 är kontrollpunkter för kurvans slutpunkt.
första kontrollpunkten antas vara samma som
sista kontrollpunkt på föregående kurva
Command:
A, a
Name:
elliptical
arc
Parameters:
rx,ry
x-axis-rotation
large-arc-flag,
sweep-flag
x,y
Description:
Ritar en elliptisk båge rån nuvarande punkt till x och y
rx,ry är radier.
x-rotation är rotation runt x-axeln.
large-arc-flag och sweep-flag kräver en speciell tutorial
Googla om ni inte orkar vänta på att jag lägger upp en 😄
Command:
Z, z
Name:
closepath
Parameters:
Description:
Stänger en form genom att rita en linje
från nuvarande punkt till första punkten