[[: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 =====
{{ :oktatas:grafika:svg:vonal.svg |}}
===== SVG alakzatok =====
* Téglalap
* Kör
* Ellipszis
* Vonal
* Többvoal
* Sokszög
* Útvonal
===== 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.
{{ :oktatas:grafika:svg:vonalvastag.svg |}}
===== Vonal folytonosság =====
A stroke-dasharray tulajdonsággal szaggatott vonal hozható létre.
{{ :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.
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.
{{ :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.
{{ :oktatas:grafika:svg:teglalap.svg |}}
==== Téglalap lekerekített sarokkal ====
{{ :oktatas:grafika:svg:teglalap_lekerekitett_sarokkal.svg |}}
===== Kör =====
Kör a **circle** elemmel hozható létre.
{{ :oktatas:grafika:svg:kor.svg |}}
===== Ellipszis =====
{{ :oktatas:grafika:svg:ellipszis.svg |}}
===== Polygon (Sokszög) =====
{{ :oktatas:grafika:svg:polygon.svg |}}
===== Többvonal =====
{{ :oktatas:grafika:svg:tobbvonal.svg |}}
===== Belső stíluslap =====
{{ :oktatas:grafika:svg:belso_stiluslap.svg |}}
===== Külső stíluslap =====
line {
stroke: gold;
stroke-width: 4;
}
===== Osztályok használata =====
{{ :oktatas:grafika:svg:osztaly_hasznalat.svg |}}
===== Szöveg =====
==== Szimpla szöveg ====
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.
{{ :oktatas:grafika:svg:szoveg_forgatasa.svg |}}
==== Szöveg beállítások ====
{{ :oktatas:grafika:svg:szoveg_beallitasok.svg |}}
===== SVG weblapon =====
SVG weblapon
===== Ú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
{{ :oktatas:grafika:svg:utvonal.svg |}}
===== Görbe =====
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 ====
{{ :oktatas:grafika:svg:gorbe_curve_tipus.svg |}}
{{ :oktatas:grafika:svg:gorbe_curve_tipus2.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
===== 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