SVG alapok

Szerző: Sallai András
Copyright © 2011, Sallai András
Szerkesztve: 2011, 2017
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Bevezetés

Az SVG egy nyelv, kétdimenziós vektorgrafikák leírására XML-ben. A nagyszerűsége abban mutatkozik meg, hogy weboldalba forráskód szinten beépíthetők. Ezzel nagyon könnyen tehetünk SVG képeket weblapjainkra.

SVG fájlok megtekintése

Firefox, Internet Explorer 9, Google Chrome, Opera, és Safari böngészők támogatják az SVG-t. IE8 és korábbi változataiban csak plug-in segítségével működik, ilyen az Adobe SVG Viewer.

SVG Fájlok készítése

Mivel az SVG fájlok valójában XML fájlok, ezért egy szimpla szövegszerkesztővel (Jegyzettömb) létrehozhatók, de létezik SVG rajzolóprogram is, például az Inkscape.

Egy-egy rajzelem egy XML elemmel hozható létre.

Vonal rajzolása

vonal.svg

<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="110">
 
    <line 	x1="10" 
		y1="10" 
		x2="100" 
		y2="100" 
		style="stroke:blue"
		/>
 
</svg>

SVG alakzatok

Téglalap <rect>
Kör <circle>
Ellipszis <ellipse>
Vonal <line>
Többvoal <polyline>
Sokszög <polygon>
Útvonal <path>

SVG színek

blue
red
yellow
white
black
purple
lime

Zöld szín:

#0f0

Zöld szín:

rgb(0, 255, 0)

Vonal vastagsága

Szimpla vonal a line elemmel hozható létre. A stroke tulajdonsággal megadható a vonal színe. A vonal szélességét a stroke-width tulajdonsággal állíthatjuk, mint azt a példában is láthatjuk.

vonalvastag.svg

<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
    <line 	x1="10" 
		y1="10" 
		x2="100" 
		y2="100" 
		style="stroke:blue; stroke-width:10"
		/>
 
</svg>

Vonal folytonosság

A stroke-dasharray tulajdonsággal szaggatott vonal hozható létre.

vonalvastag.svg

<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
    <line 	x1="10" 
		y1="10" 
		x2="100" 
		y2="100" 
		style="stroke:blue; stroke-dasharray: 4;"
		/>
 
</svg>

Átlátszóság

A stroke-opacity tulajdonsággal a vonalak számára átlátszóságot állíthatunk.

atlatszo.svg

<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
    <line 	x1="100" 
		y1="10" 
		x2="100" 
		y2="100" 
		style="stroke:blue; stroke-width:10; stroke-opacity:0.5;"
		/>
 
    <line 	x1="150" 
		y1="10" 
		x2="150" 
		y2="100" 
		style="stroke:blue; stroke-width:10; stroke-opacity:0.2;"
		/>
 
 
</svg>

Az átlátszóságot 0 és 1 között állíthatjuk. Minél kisebb, annál átlátszóbb.

Vonalvégződés

A stroke-linecap tulajdonsággal a vonalak végződése állítható be.

vegzodes.svg

<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
    <line 	x1="50" 
		y1="10" 
		x2="50" 
		y2="100" 
		style="stroke:blue; stroke-width:10; stroke-linecap:butt;"
		/>
 
    <line 	x1="80" 
		y1="10" 
		x2="80" 
		y2="100" 
		style="stroke:blue; stroke-width:10; stroke-linecap:round;"
		/>
 
    <line 	x1="110" 
		y1="10" 
		x2="110" 
		y2="100" 
		style="stroke:blue; stroke-width:10; stroke-linecap:square;"
		/>
</svg>

A butt, round és square érték.

Téglalap

Egyszerű téglalap

Téglalap a rect elemmel hozható létre.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="80" 
        height="50"
  style="fill:rgb(0,0,255); 
         stroke-width:1;
         stroke:rgb(0,0,0)"/>
</svg>

Téglalap lekerekített sarokkal

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="80" height="50"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

Kör

Kör a circle elemmel hozható létre.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

Ellipszis

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="110" cy="50" rx="60" ry="30"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

Polygon (Sokszög)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="60">
  <polygon points="50,20 20,40 70,50"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Többvonal

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="75,25 50,40 50,70 75,80 75,120"
  style="fill:none;stroke:black;stroke-width:2" />
</svg>

Belső stíluslap

internalstyle.svg

<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
    <style type="text/css">
    <![CDATA[
	line {
	    stroke: blue;
	    stroke-width: 4;
	}
    ]]>
    </style>
 
    <line 	x1="50" 
		y1="10" 
		x2="50" 
		y2="100"/>
 
    <line 	x1="80" 
		y1="10" 
		x2="80" 
		y2="100"/>
 
</svg>

Külső stíluslap

kulsostilus.svg

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="f12_2.css" type="text/css"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
<!-- primitivek -->
 
</svg>

Osztályok használata

osztaly.svg

<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
    <style type="text/css">
    <![CDATA[
	line {
	    stroke: blue;
	    stroke-width: 4;
	}
	line.elso {
	    stroke: red;
	}
    ]]>
    </style>
 
    <line class="elso"
		x1="50" 
		y1="10" 
		x2="50" 
		y2="100"/>
 
    <line 	x1="80" 
		y1="10" 
		x2="80" 
		y2="100"/>
</svg>

Szöveg

Szimpla szöveg

szoveg.svg

<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
    <text	x="100"
		y="100"
		style="">
		Helló Világ!
    </text>
 
</svg>

Vegyük észre az első sorban a kódolás beállítását. Az ékezetes betűk miatt szükség van rá.

Szöveg forgatása

A rotate első paramétere a forgatás szöge 12 órától az óra járásával egyezően. A második a forgatás tengelyének pontja.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="15" y="15" fill="red" transform="rotate(45 20,0)">
  Ez a szöveg forgatható
  </text>
</svg>

Szöveg beállítások

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
  <text x="15" y="15" fill="red" font-weight="bold">Ez a szöveg vastag</text>
  <text x="15" y="35" fill="red" font-weight="none">Ez a szöveg normál </text>
  <text x="15" y="55" fill="red" font-style="italic">Ez a szöveg dőlt </text>
  <text x="15" y="85" fill="red" font-size="18">Ez a szöveg méretezett</text>
 
</svg>

SVG weblapon

index.html

<html>
<body>
 
<h1>SVG weblapon</h1>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle 	cx="100" 
		cy="50" 
		r="40" 
		stroke="black"
		stroke-width="2" 
		fill="blue" />
</svg>
 
</body>
</html>

Útvonal

Olyan teknősbéka grafika szerű. Menj oda, húzz vonalat közben, stb.

M = moveto - menj ide (x y)
L = lineto - Húzz egy vonalat ide(x y)
H = vízszintes vonal adott pontba
V = függőleges vonal adott pontba
C = görbe, adott pontba
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = útvonal lezárása

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M50 0 L75 250 L225 200 Z" style="fill:blue"/>
</svg>

Görbe

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
<path d="M 10 80 q 200 -80 300 0"
  stroke="blue" stroke-width="1" fill="none" />
 
</svg>

Az M után van a kezdőpont. A q után milyen irányba húzzuk a görbét, majd hol végződjön.

Három pontot kell meghatároznunk:

Curve típusú görbe

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="280">
 
<path d="M100,200 C100,100 250,100 250,200"
  stroke="blue" stroke-width="1" fill="none" />
 
<path d="M10,10 S50,50 50,10"
  stroke="blue" stroke-width="1" fill="none" />
 
</svg>

Melléklet

Színek

aliceblue

antiquewhite

aqua

aquamarine

azure

beige

bisque

black

blanchedalmond

blue

blueviolet

http://www.w3.org/TR/SVG/types.html#ColorKeywords

Tartalomjegyzék