[[:oktatas:grafika:svg|< SVG]] ====== SVG alapok ====== * **Szerző:** Sallai András * Copyright (c) 2011, Sallai András * Szerkesztve: 2011, 2017 * 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 =====

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

===== Vonal folytonosság ===== A stroke-dasharray tulajdonsággal szaggatott vonal hozható létre.

===== Á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. ===== Vonalvégződés ===== A stroke-linecap tulajdonsággal a vonalak végződése állítható be.

A butt, round és square érték. ===== Téglalap ===== ==== Egyszerű téglalap ==== Téglalap a **rect** elemmel hozható létre.

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

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

===== Ellipszis =====

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

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

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

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

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

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

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

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

===== 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. Három pontot kell meghatároznunk: ==== Curve típusú görbe ====

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