[[:oktatas:grafika:svg|< SVG]]

====== SVG alapok ======

  * **Szerző:** Sallai András
  * Copyright (c) 2011, Sallai András
  * Szerkesztve: 2011, 2017, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 =====


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

</code>

{{ :oktatas:grafika:svg:vonal.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.

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

</code>

{{ :oktatas:grafika:svg:vonalvastag.svg |}}

===== Vonal folytonosság =====

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


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

</code>

{{ :oktatas:grafika:svg:szaggatottvonal.svg |}}



===== Átlátszóság =====

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

<code xml 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>
</code>

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

{{ :oktatas:grafika:svg:atlatszo.svg |}}



===== Vonalvégződés =====

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

<code xml 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>
</code>

{{ :oktatas:grafika:svg:vegzodes.svg |}}

A butt, round és square érték.
===== Téglalap =====
==== Egyszerű téglalap ====

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

<code xml>
<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>
</code>

{{ :oktatas:grafika:svg:teglalap.svg |}}

==== Téglalap lekerekített sarokkal ====

<code xml>
<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>
</code>

{{ :oktatas:grafika:svg:teglalap_lekerekitett_sarokkal.svg |}}



===== Kör =====

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

<code xml>
<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>
</code>

{{ :oktatas:grafika:svg:kor.svg |}}

===== Ellipszis =====

<code xml>
<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>
</code>


{{ :oktatas:grafika:svg:ellipszis.svg |}}




===== Polygon (Sokszög) =====

<code xml>
<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>
</code>

{{ :oktatas:grafika:svg:polygon.svg |}}



===== Többvonal =====


<code xml>
<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>
</code>

{{ :oktatas:grafika:svg:tobbvonal.svg |}}

===== Belső stíluslap =====


<code xml 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>
</code>

{{ :oktatas:grafika:svg:belso_stiluslap.svg |}}


===== Külső stíluslap =====


<code xml kulsostilus.svg>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="style.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 -->

    <line 	x1="50" 
		y1="10" 
		x2="50" 
		y2="100"/>
 
    <line 	x1="80" 
		y1="10" 
		x2="80" 
		y2="100"/>

</svg>
</code>

<code css style.css>
line {
	stroke: gold;
	stroke-width: 4;
}

</code>

===== Osztályok használata =====

<code xml 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>
</code>

{{ :oktatas:grafika:svg:osztaly_hasznalat.svg |}}

===== Szöveg =====

==== Szimpla szöveg ====

<code xml 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>
</code>
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á.


{{ :oktatas:grafika:svg:szimpla_szoveg.svg |}}

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

<code xml>
<?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>
</code>

{{ :oktatas:grafika:svg:szoveg_forgatasa.svg |}}


==== Szöveg beállítások ====



<code xml>
<?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>
</code>

{{ :oktatas:grafika:svg:szoveg_beallitasok.svg |}}

===== SVG weblapon =====

<code html 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>
</code>



<html>
<iframe src="m/svg/svgweblapon/index.html" width=350 height="300">
</iframe>
</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

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

{{ :oktatas:grafika:svg:utvonal.svg |}}


===== Görbe =====

<code xml>
<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>
</code>

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.

{{ :oktatas:grafika:svg:gorbe.svg |}}



Három pontot kell meghatároznunk:

{{ :oktatas:grafika:svg:gorbe_haromponttal.svg |}}




==== Curve típusú görbe ====

<code xml>
<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>
</code>

{{ :oktatas:grafika:svg:gorbe_curve_tipus.svg |}}



{{ :oktatas:grafika:svg:gorbe_curve_tipus2.svg |}}




===== Melléklet =====

==== Színek ====

<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(240, 248, 255); stroke:black;" />
</svg>
</html>
aliceblue


<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(250, 235, 215); stroke:black;" />
</svg>
</html>
antiquewhite

<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(0, 255, 255); stroke:black;" />
</svg>
</html>
aqua


<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(127, 255, 212); stroke:black;" />
</svg>
</html>
aquamarine

<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(240, 255, 255); stroke:black;" />
</svg>
</html>
azure


<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(245, 245, 220); stroke:black;" />
</svg>
</html>
beige

<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(255, 228, 196); stroke:black;" />
</svg>
</html>
bisque

<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(0, 0, 0); stroke:black;" />
</svg>
</html>
black


<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(255, 235, 205); stroke:black;" />
</svg>
</html>
blanchedalmond

<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(0, 0, 255); stroke:black;" />
</svg>
</html>
blue

<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<rect width="20" height="20" style="fill: rgb(138, 43, 226); stroke:black;" />
</svg>
</html>
blueviolet

  * http://www.w3.org/TR/SVG/types.html#ColorKeywords
===== Linkek =====
==== Általában az SVG-ről ====

  * http://www.w3.org/Graphics/SVG/
  * http://www.w3schools.com/svg/
  * http://svg.elte.hu
  * http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands
  * http://www.svgbasics.com/curves.html
  * http://apike.ca/prog_svg.html
  * http://www.java2s.com/Code/XML/SVG/CatalogSVG.htm
  * http://wiki.svg.org
  * http://tutorials.jenkov.com/svg
  * http://www.carto.net/papers/svg/

==== Minták ====

  * http://msdl.cs.mcgill.ca/people/julien/SVG%20Manipulation%20Code
  * http://lists.macosforge.org/pipermail/webkit-unassigned/2009-July/120275.html
  * http://tech.groups.yahoo.com/group/svg-developers/message/599