Egy kis történelem

A ’90-es évek végén a Macromedia és a Microsoft több céggel közösen bemutatta a VML-t, amire az Adobe (és szintén további cégekkel közösen) a PGML-lel válaszolt. A W3C az elődöktől tanulva létrehozta az SVG Munkacsoportot, aminek az eredménye az SVG 1.0 szabvány lett, melyet a konzorcium hivatalosan is ajánlott használatra, bár nem volt hatalmas visszhangja akkoriban. Azóta eltelt néhány év, nem eseménytelenül, az SVG Munkacsoport továbbra is dolgozik az SVG 2 fejlesztésén, mely lehetővé teszi a HTML5, CSS és WOFF integrációt.

Miért is jó nekünk egy végtelenül nagyítható grafikai formátum a webdesignban?

  1. Reszponzív weboldalak
    Nem kell aggódni a pixeles grafikáktól a FullHD, Retina és 4K megjelenítőkön, sem a hosszabb betöltési időtől mobil eszközökön.
  2. Tűéles kreatívok
    Magáért beszél.
  3. Időtálló weboldalak
    Amíg a W3C diktálja az “iparág” alapjait, sokáig élvezhetjük előnyeit.

Fogjuk munkára!

Adobe Illustrator vagy Inkscape segítségével könnyedén készíthetünk vektoros grafikákat, azonban ahhoz, hogy weboldalunkon használhassuk, .svg formátumban kell mentenünk őket.

Kép: www.pencilscoop.com

Nézzünk bele egy svg fájl lelkébe. Szerkezetét tekintve hasonló a HTML-hez, valójában XML kódot kapunk, mely azért is izgalmas, mert utólag manipulálhatjuk a grafikát, interaktívvá tehetjük.

Kép: css-tricks.com

SVG fájlunkat akár raszteres képfájlok helyett is használhatjuk, például így: 

<img src="logo.svg" alt="Vektorgrafikus logó">

Ugyanúgy paraméterezhető, ahogy jpg, png, stb. fájlok esetén. IE8 és Android 2.3 felett minden eszköz és böngésző támogatja svg fájlok megjelenítését. Ha háttérképként használnánk, akkor sem szükségszerű kétségbe esni:

.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(kiwi.svg);
background-size: 100px 82px;
}

Beágyazva is használhatjuk ezeket, egyszerűen a kódot beillesztve tetszés szerinti helyre (a WYSIWYG szerkesztők nem igazán szeretik). Ráadásul így CSS-sel hozzá is nyúlhatunk.

<svg ...> 
<ellipse class="ground" .../>
<path class="logo" .../>
</svg>
.logo { fill: #94d31b; } 
.logo:hover { fill: #ace63c; }

Menjünk még tovább:

<img src="data:image/svg+xml;base64,[data]">

.logo { background: url(data:image/svg+xml;base64,[data]); }

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]"></object>

Néhány weboldal, melyek SVG-t használnak: 
http://www.awwwards.com/25-examples-of-creative-vector-images-in-web-design.html

Felhasznált források:

Leave a comment