SVG grafický formát a kde sa používa. Úvod do grafiky SVG Nakreslite diagram v prehliadači html svg

Vektorová grafika je široko používaná v tlačených médiách. Na web môžeme pridať aj vektorovú grafiku SVG (Škálovateľná vektorová grafika). S odvolaním sa na oficiálnu špecifikáciu na W3.org je SVG opísaný ako jazyk na popis dvojrozmernej grafiky v XML. SVG vám umožňuje vytvárať vektorové grafické tvary (napríklad obrys z priamych čiar a kriviek), obrázky a text.

Výhody SVG

SVG ponúka oproti rastrovej grafike niekoľko výhod, tu sú niektoré z nich:

Škálovateľnosť

Rastrový obrázok sa skladá z pixelov a pri zmene mierky stráca kvalitu, zatiaľ čo vektorová grafika si zachováva svoje proporcie bez ohľadu na mierku.

Zrýchlenie požiadavky HTTP

Súbor SVG je možné vložiť priamo do dokumentu HTML pomocou značky svg, takže prehliadač nemusí zadávať požiadavku. To vedie k lepší výkon a menšie zaťaženie stránky.

Štylizácia a scenáre

Vloženie značky svg priamo do dokumentu HTML nám tiež umožňuje jednoduché nastavenie grafických štýlov pomocou . Môžeme meniť vlastnosti objektu ako farba pozadia, priehľadnosť okrajov atď. Okrem toho môžeme tiež manipulovať s grafikou pomocou .

Obrázky môžu byť animované a upraviteľné

Objekt SVG je možné animovať pomocou animácie prvkov pomocou css alebo JavaScriptu (JQuery). Objekt SVG je možné upravovať pomocou ľubovoľného textového editora alebo editora vektorovej grafiky, ako je napríklad Inkscape alebo Adobe Illustrator.

Menšia veľkosť súboru

SVG má menšiu veľkosť súboru v porovnaní s rastrovým obrázkom.

Vytváranie jednoduchých tvarov pomocou SVG

Podľa špecifikácie vieme vytvoriť niektoré základné tvary ako napr obdĺžniky, kruhy, čiary, elipsy, lomené čiary a mnohouholníky pomocou SVG a aby prehliadač zobrazoval grafiku SVG, všetky tieto grafické prvky musia byť vložené do značky tag. Pozrime sa na príklady nižšie:

Linka

Komu Nakresli čiaru v SVG môžete použiť prvok . Tento prvok sa používa na nakreslenie jednej čiary, takže bude pozostávať iba z dvoch bodov, Štart A koniec.

< /svg>

Ako vidíte vyššie, počiatočný bod čiary je vyjadrený prvými dvoma atribútmi x1 a x2 a koncový bod súradnice čiary je vyjadrený pomocou y1 a y2 .

Existujú aj dva ďalšie atribúty, zdvih a šírka-šírky, ktoré sa používajú na definovanie farby a šírky okraja. Okrem toho môžeme tieto atribúty definovať aj v inline štýle:

Style="stroke-width:1; stroke:rgb(0,0,0);"

ona nakoniec robí to isté.

prerušovaná čiara

Tento prvok je podobný , ale s pomocou Pre prvok môžeme nakresliť niekoľko čiar namiesto jednej. Tu je príklad:

"0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width ="1" stroke="rgb(0,0,0)" /> < /svg>

Obdĺžnik

Kreslenie obdĺžnika je tiež jednoduché element. Musíme zadať iba šírku a výšku, a to takto:

< /svg>

Kruh

Kruh môžeme nakresliť aj s element. V nasledujúcom príklade vytvoríme kruh s polomerom 100 definovaným pomocou atribútu r:

< /svg>

Prvé dva atribúty, cx a cy, definujú súradnice stredu kruhu. Vo vyššie uvedenom príklade sme vytvorili 102 ako súradnice x aj y, ak tieto atribúty nie sú špecifikované, 0 sa bude považovať za predvolenú hodnotu.

Elipsa

Pomocou značky môžeme nakresliť elipsu . Princíp vytvárania je rovnaký ako pri kruhu, ale tentoraz môžeme ovládať polomer x a polomer y, ako aj atribúty rx a ry;

< /svg>

Polygón

Použitie prvku Dokážeme vyrobiť viacstranné tvary ako trojuholník, šesťuholník a dokonca aj obdĺžnik. Tu je príklad:

"70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width ="1" stroke="rgb(0,0,0)" /> < /svg>

Použitie editora vektorovej grafiky

Ako vidíte, používanie jednoduchých objektov SVG v dokumente HTML je celkom jednoduché. Keď sa však objekt stáva zložitejším, táto metóda už nie je ideálna.

Našťastie, ako sme spomínali vyššie, môžeme použiť napríklad vektorový grafický editor Adobe Illustrator alebo Inkscape .

Ak pracujete s Inkscape, môžete uložiť svoje vektorové súbory vo formáte SVG a potom ich otvoriť v editore textového kódu. Skopírujte všetky kódy a vložte ich do dokumentu HTML.

Súbory .svg môžete vložiť napríklad pomocou značiek embed , iframe a object;

Výsledok bude v konečnom dôsledku rovnaký.

*V tomto príklade používame obrázok

Dnes si povieme niečo o SVG, aký je to formát, s čím sa používa a či sa oplatí ho používať. Aj keď tento formát nie je príliš nový, svoju popularitu si získal vďaka svojej implementácii. Všetky najnovšie verzie prehliadače už dostali podporu pre tento formát.

Prečo je taký populárny? A čím sa vlastne líši od ostatných? Dnes odpovieme na tieto otázky a tiež vám povieme, čo potrebujete vedieť, aby ste mohli začať pracovať s týmito typmi súborov.

čo je SVG?

SVG – Scalable Vector Graphics – je vektorový formát pre webových vývojárov. Tento typ formát sa stal tak populárnym, pretože jeho obrázky je možné zobraziť vo vysokom rozlíšení bez straty kvality, pretože SVG je vektorový formát.

Impulz na rozvoj tohto jazykového označenia dalo ako prvé konzorcium World Wide Web(World Wide Web Consortium), ktorá bola v roku 1999 známejšia ako W3C. W3C dalo koncept SVG - značkovací jazyk na vytváranie dvojrozmerných grafické rozhrania a obrázky.

Použitie v praxi

Čo robí SVG tak populárnym a prečo ho začína používať čoraz viac dizajnérov? Je to veľmi jednoduché, funguje to ako má.

SVG je v porovnaní s inými formátmi ľahký. Tento formát jednoducho neuveriteľné príležitosti. Vlajky, symboly, prvky rozhrania. A to je len malý zoznam toho, ako sa dá využiť. Najväčšou výhodou jeho použitia je, že ide o vektorový formát, čiže ho možno použiť na akomkoľvek displeji – nech je ich rozlíšenie akékoľvek, všade sa zobrazí rovnako.

Súbory SVG sa spravujú pomerne jednoducho, pretože ich súbory sa ukladajú ako statický obrázok. Interaktivitu môžete pridať na svoj web vytvorením veľmi jednoduchých, ale krásnych animácií pomocou SVG.

Niekoľko príkladov, kde sa dá použiť:

Logá
Obrázok na pozadí
Použite ako tlačidlo
karty
Diagramy alebo výkresy

SVG sa spravidla najčastejšie používa pri tvorbe responzívnych webov, animácií a iných dynamických efektov.

Výhody používania SVG

Prečo by sme teda mali opustiť zvyčajný JPG alebo GIF v prospech SVG? Existuje niekoľko dôvodov, prečo by ste ho mali stále používať vo svojom projekte.

SVG je vektorový formát, a preto sa ho oplatí používať na responzívnych stránkach, kde veľkosť obrázkov závisí od rozlíšenia displeja používateľa a SVG sa perfektne hodí.
Obrázky SVG používajú XML na definovanie svojich vlastností, a preto majú schopnosť byť ešte viac komprimované.
S obrázkami SVG sa veľmi ľahko manipuluje a to otvára ešte viac možností pre dizajnérov, ktorí môžu meniť farby, pridávať tiene, filtre, rozmazania a mnoho ďalších efektov.
SVG je celkom ľahké pochopiť
SVG pracuje s otvorenými webovými štandardmi
Na vytvorenie SVG môžete použiť bežný editor textového kódu. To vám dáva určitú slobodu vo vašom konaní, všetko závisí od vašich potrieb a úrovne odborných znalostí v tejto oblasti.

Nevýhody používania SVG

Pravdepodobne ste šokovaní, koľko výhod má SVG. A možno si mysleli, že to nemá žiadne nevýhody. Ale nie, určite ich je pár a tu sú niektoré z nich:

Neexistuje žiadna podpora pre staršie prehliadače, ako je Explorer 8 a nižšie.
SVG nie je možné použiť na fotografiách, pretože ide o vektorový formát a používa sa na vytváranie rôznych tvarov a čiar.

Čo bude ďalej?

Budúcnosť SVG sa práve začína. Ako akceptovaný obrazový formát (a štandard) pre mobilné zariadenia bude SVG naďalej naberať na sile.

Tento príspevok je prvým zo série článkov o SVG (Scalable Vector Graphic), ktorý pokrýva základy vektorovej grafiky na stránke.

Vektorová grafika je široko používaná v tlači. Pre webstránky existuje SVG, čo podľa oficiálnej špecifikácie na w3.org je jazyk na popis dvojrozmernej grafiky v XML. SVG obsahuje tri typy objektov: tvary, obrázky a text. SVG existuje od roku 1999 a od 16. augusta 2011 je súčasťou odporúčaní W3C. SVG je webovými vývojármi veľmi podceňované, hoci má niekoľko dôležitých výhod.

Výhody SVG

Škálovanie: Na rozdiel od rastrovej grafiky, SVG nestráca kvalitu pri škálovaní, takže je vhodné ho použiť na vývoj sietnice.
Zníženie požiadaviek HTTP: pri používaní SVG sa zníži počet volaní na server a zodpovedajúcim spôsobom sa zvýši rýchlosť načítania stránky.
Štýl a skriptovanie: Pomocou CSS môžete zmeniť nastavenia grafiky na stránke, ako je pozadie, priehľadnosť alebo okraje.
Animácia a úprava: pomocou javascriptu môžete animovať SVG, ako aj upravovať v texte resp grafický editor(InkScape alebo Adobe Illustrator).
Malá veľkosť: Objekty SVG vážia oveľa menej ako rastrové obrázky.

Základné tvary SVG

Podľa oficiálnej špecifikácie môžete pomocou SVG kresliť jednoduché objekty: obdĺžnik, kruh, čiara, elipsa, lomená čiara alebo mnohouholník pomocou značky svg.

Jednoduchá čiara pomocou značky riadok len s dvoma parametrami - počiatočné body (x1 a x2) a koncové body (y1 a y2):

Môžete tiež pridať atribúty alebo štýly ťahu a šírky ťahu na nastavenie farby a šírky:

Style="stroke-width:1; stroke:rgb(0,0,0);"

prerušovaná čiara

Syntax je podobná predchádzajúcej, používa sa značka lomená čiara, atribút bodov stanovuje body:

Obdĺžnik

Vyvolané značkou rect, môžete pridať niektoré atribúty:

Kruh

Volané podľa značky kruh, v príklade s použitím atribútu r nastaviť polomer, cx A cy uveďte súradnice stredu:

Elipsa

Volané podľa značky elipsa, funguje podobne kruh, ale môžete zadať dva polomery - rx A ry:

Polygón

Volané podľa značky mnohouholník, mnohouholník môže mať rôzny počet strán:

Používanie editorov

Ako môžete vidieť z príkladov, kreslenie základných tvarov SVG je veľmi jednoduché, ale objekty môžu byť oveľa zložitejšie. Na tie je potrebné použiť vektorové grafické editory, ako napríklad Adobe Illustrator alebo Inkscape, kde si môžete ukladať súbory vo formáte SVG a následne ich upravovať v textovom editore. SVG môžete vložiť na stránku pomocou embed, iframe a object:

Príkladom je obrázok iPodu z OpenClipArt.org.

SVG (Scalable Vector Graphics) je vektorový grafický štandard vyvinutý konzorciom W3C.

SVG je značkovací jazyk na popis dvojrozmerných grafických aplikácií a obrázkov a je podmnožinou XML jazyka Extensible Markup Language. To zahŕňa aj množstvo súvisiacich grafických skriptov.

SVG podporuje každý moderné prehliadače pre PC a mobilné telefóny. Niektoré funkcie, ako napríklad animácie SMIL a písma SVG, nie sú také rozšírené.

Najnovšia verzia celej špecifikácie je SVG 1.1.

SVG 2 je vo vývoji. Pridá nové, ľahko použiteľné funkcie pre SVG a tiež pracuje na užšej integrácii s HTML, CSS a DOM.

Výhody SVG

Grafika SVG sa vytvára pomocou matematických vzorcov, ktoré je možné upraviť pri zmene veľkosti obrázka. Teda vektorové obrázky mierka lepšia ako rastrové.
Veľkosť vektorového obrázka je zvyčajne menšia ako porovnateľné obrázky vo formátoch JPEG, GIF alebo PNG.
SVG grafika má textový formát, ktoré je možné upravovať v poznámkovom bloku alebo kresliť v grafických vektorových editoroch Adobe Illustrator, CorelDRAW.
Skripty a animácie SVG vám umožňujú vytvárať dynamickú a interaktívnu grafiku.
Text v grafike SVG je text, nie obrázok, preto ho indexujú vyhľadávače.
K obrázku SVG môžete pridať viacero odkazov.
Externé tabuľky môžete pripojiť k formátu SVG CSS štýly, globálne štýly v kontajneri alebo pridajte interné štýly pomocou atribútu style na značkách tvaru a cesty.

Vloženie SVG do webovej stránky

Existuje niekoľko spôsobov, ako vložiť obrázok SVG na webovú stránku. Prvým z nich je jednoduché vloženie SVG kódu do stránky (pri veľkom obrázku sa HTML kód stránky stane obrovským a ťažko čitateľným). Pri iných metódach musíte najskôr uložiť kód SVG do súboru s príponou .svg.

Tu sú spôsoby, ako vložiť obrázok SVG na webovú stránku:

priame vkladanie kódu do HTML dokumentu v kontajneri ;
použitie súboru SVG ako obrázka na pozadí;
pripojenie súboru SVG k dokumentu HTML pomocou značiek img, vložiť, objekt A iframe;
pripojenie súboru SVG k dokumentu PHP pomocou funkcie zahŕňajú.

1. Priame vloženie SVG kódu do webového dokumentu

2. Použitie súboru SVG ako obrázka na pozadí

3. Pripojenie súboru SVG pomocou značky img

4. Pripojenie súboru SVG pomocou značky embed

5. Vrátane súboru SVG pomocou tagu object

6. Pripojenie súboru SVG pomocou značky iframe

7. Vloženie súboru SVG pomocou funkcie include

Komplexná trajektória

Určené značkou . Je to najuniverzálnejší z prvkov SVG. Umožňuje vytvárať ľubovoľné tvary. Tvar postavy je určený atribútmi d, ktorého hodnota je množina špeciálnych príkazov. Tieto príkazy môžu byť veľké aj malé. Veľké písmená označujú, že sa používa absolútne umiestnenie, zatiaľ čo malé písmená označujú relatívne umiestnenie.

Príkazy, ktoré určujú trajektóriu a smer kučeravej čiary

M,m	štartovací bod Mx, y
L, l	Rovný segment Lx, y
H, h	Horizontálna čiara Hx, y alebo hx
V, v	Vertikálna čiara Vx, y alebo vy
A,a	Oblúk elipsy Arx,ry x-os-rotácia veľký oblúk-vlajka,sweep-flag x,y rx,ry– polomery oblúka elipsy; rotácia osi x– uhol natočenia oblúka vzhľadom na os X; vlajka veľkého oblúka– ak (=1), potom sa postaví väčšia časť oblúka, ak (=0) – menšia časť; sweep-flag– ak (=1), potom sa oblúk postaví v smere hodinových ručičiek, ak (=0) – proti smeru hodinových ručičiek; x, y– súradnice koncový bod oblúky.
C, c	Kubická Bezierova krivka Cx1,y1x2,y2x,y x1, y1– súradnice prvého kontrolného bodu; x2, y2 x, y
S, s	Hladká kubická bezierova krivka Sx2,y2 x,y x2, y2– súradnice druhého kontrolného bodu; x, y Prvý kontrolný bod je zrkadlovým obrazom druhého kontrolného bodu.
Q, q	Kvadratická Bezierova krivka Qx1,y1x,y x1, y1– súradnice kontrolného bodu; x, y– súradnice koncového bodu krivky.
T,t	Hladká kvadratická Bezierova krivka Qx1,y1x,y x, y– súradnice koncového bodu krivky. Kontrolný bod tohto príkazu je zrkadlovým obrazom kontrolného bodu predchádzajúceho príkazu.
Z, z	Uzavretie cesty

Príklad

VÝSLEDOK:

SVG je obrázkový formát pre vektorovú grafiku. Doslova nejde o nič iné ako o škálovateľnú vektorovú grafiku. To znamená, že presne s tým pracujete v aplikácii Adobe Illustrator. Používanie SVG pri vývoji webu je pomerne jednoduché, ale existujú niektoré funkcie, ktoré stojí za zváženie.

Na čo sa používa SVG?

Malá veľkosť súboru, ktorý sa dobre komprimuje
Škálovanie na ľubovoľnú veľkosť bez straty kvality
Vyzerá skvele na displejoch sietnice
Plná kontrola dizajnu v interaktivite a filtroch

Poďme si niečo nakresliť do pripravovaného diela v Adobe Illustrator. Zoberme si vtáka Kiwi:

Upozorňujeme, že plátno je orezané presne pozdĺž okraja obrazu. Plátno SVG je skonštruované úplne rovnako ako PNG alebo JPG. Súbor môžete uložiť priamo z aplikácie Adobe Illustrator ako súbor SVG.

Po uložení súboru sa zobrazí ďalšie dialógové okno s možnosťami SVG. Úprimne povedané, neviem veľa o všetkých nastaveniach uvedených v tomto okne. Existuje špecifikácia pre SVG profily, takže ak máte záujem, môžete si ju prečítať. Zistil som, že SVG 1.1 funguje skvele.

Skvelé je, že môžete kliknúť na tlačidlo OK a uložiť súbor, alebo kliknúť na tlačidlo „Kód SVG...“ a otvorí sa textový editor s kódom SVG.

Obe metódy môžu byť užitočné.

Použitie SVG ako značky img

V aplikácii Illustrator sa ukázalo, že naše plátno má veľkosť 612 pixelov ✕ 502 pixelov.

Aký veľký bude obrázok na stránke je len na vás. Veľkosť obrázka môžete zmeniť definovaním vlastností šírky a výšky presne rovnakým spôsobom ako v prípade PNG alebo JPG. Tu je príklad:

Pozrite si toto pero!

Ako vytvoriť SVG v rôznych prehliadačoch

Pri používaní SVG týmto spôsobom si musíte byť vedomí podpory rôznych prehliadačov. SVG v podstate funguje všade okrem IE8 a nižšieho, ako aj Android 2.3 a nižšie.

Ak potrebujete použiť SVG, ale zároveň potrebujete podporu z vyššie uvedených prehliadačov, existuje niekoľko možností, ako problém vyriešiť. Na vyriešenie tohto problému som použil niekoľko techník v rôznych projektoch.

Jedným zo spôsobov, ako skontrolovať podporu SVG, je Modernizr, pomocou ktorého zmeníte cestu src:

If (!Modernizr.svg) ( $(.logo img").attr("src", "images/logo.png"); )

David Bushell prišiel s veľmi jednoduchým alternatívny spôsob ale obsahuje javascript v značke:

Pomôcť môže aj služba SVGeezy. Keď budeme pokračovať v tomto článku, pozrieme sa na mnohé iné metódy zálohovania pre podporu SVG.

Použitie SVG ako obrázka na pozadí

Podobne ako pri značke img, SVG možno použiť ako obrázok na pozadí:

Logo Kiwi Corp ( display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; )

Všimnite si, že nastavujeme veľkosť pozadia tak, aby bola presne rovnaká ako veľkosť prvku. To sa musí urobiť, pretože inak by sme videli malý vrchná časť pôvodný obrázok. Tieto čísla zohľadňujú pôvodné proporcie obrazu. Ako hodnoty môžete použiť aj veľkosť pozadia Kľúčové slová, napríklad obsahovať, takže obrázok úplne zaberá celý prvok.

Použitie SVG ako obrázka na pozadí ovplyvňuje podporu prehliadača, ale vo všeobecnosti je všetko rovnaké ako pri použití značky img.

Modernizr nám tu môže pomôcť ešte viac efektívnym spôsobom ako v prípade img. Ide o to, ak vymeníte obrázok na pozadí s podporovaným formátom, potom sa vykoná iba jedna HTTP požiadavka namiesto dvoch, ako je to v prípade img. Modernizr pridáva do triedy názov „no-svg“. HTML tag ak prehliadač nepodporuje SVG:

Main-header ( background: url(logo.svg) no-repeat vľavo hore; background-size: include; ) .no-svg .main-header ( background-image: url(logo.png); )

Ak máte problémy s použitím vyššie uvedených dvoch spôsobov použitia SVG, nižšie sú ďalšie spôsoby rozloženia vektorovej grafiky.

Pomocou „inline“ SVG

Vyššie bolo spomenuté, že pri ukladaní obrázka vo formáte SVG pomocou editora Illustrator môžete získať správny kód SVG (súbor môžete otvoriť aj pomocou textový editor a skopírujte tento kód). Tento kód môžete skopírovať do svojho HTML a SVG sa vykreslí presne tak, ako keď použijete img.

To môže byť užitočné, pretože obrázok obrázka prichádza spolu s kódom v dokumente a nevyžaduje požiadavku HTTP. Inými slovami, výhody sú rovnaké ako pri použití údajových URI. Existujú však aj nevýhody. Vložením rovného SVG kódu začne dokument vyzerať ako veľký, nafúknutý kus svinstva.

Existuje tiež možnosť vložiť SVG na strane servera:

Optimalizácia SVG

Adobe Illustrator štandardne nevykonáva optimalizačné akcie na výslednom obrázku SVG. Poskytuje DOCTYPE a poznámky, a to všetko je do značnej miery odpad. SVG je štandardne dosť ľahké, ale prečo ho nezmenšiť? Peter Collingridge poskytol online nástroj optimalizovať SVG Optimiser. Pomocou tejto služby môžete nahrať starý súbor a získajte optimalizovaný nový.

Ak chcete viac hardcore - žiadny problém, tu je nástroj na optimalizáciu SVG pomocou javascriptového nástroja Node JS na strane servera https://github.com/svg/svgo

SVG styling

Vidíte, ako je SVG podobné HTML? Je to preto, že obe sú údajmi XML. V našom dizajne sú dva prvky, ktoré tvoria základ, sú to elipsa a cesta. Cez HTML kód im vieme jednoducho určiť triedy.

Teraz môžeme tieto prvky ovládať pomocou vlastného SVG CSS. Tento CSS nemusí byť priamo vložený do SVG, dá sa umiestniť úplne kdekoľvek. Upozorňujeme, že prvky SVG majú špeciálnu sadu štýlov, ktoré sú vytvorené špeciálne pre prácu s vektorovou grafikou. Napríklad sa nepoužíva obvyklá farba pozadia, ale výplň. Hoci fungujú aj niektoré bežné štýly, napríklad:hover.

Kiwi ( fill: #94d31b; ) .kiwi:hover ( fill: #ace63c; )

SVG má zábavné filtre. Napríklad rozmazanie:

...

V prípade potreby to potom môžete použiť v css:

Ground:hover ( filter: url(#pictureFilter); )

Tu je to, čo sa stalo:

Pozrite si toto pero!

Podpora „inline“ SVG v prehliadačoch

Zoznam prehliadačov, ktoré podporujú tento režim Displeje SVG si môžete pozrieť tu http://caniuse.com/#feat=svg-html5. Opäť chýba podpora v IE8 a Androide 2.3.

Jedna z záložných možností pre tento typ SVG:

...

Potom znova použijeme Modernizr:

Logo-fallback ( display: none; /* Uistite sa, že má rovnakú veľkosť ako SVG zaberá */ ) .no-svg .logo-fallback ( background-image: url(logo.png); )

Použitie SVG ako objektu

Ak vám použitie „inline“ SVG nevyhovuje (nezabudnite, že táto možnosť má aj nevýhody, ako napríklad nedostatok ukladania do vyrovnávacej pamäte), môžete SVG naviazať na objekt a potom ho zmeniť pomocou css:

Na podporu viacerých prehliadačov používame Modernizr:

No-svg .logo (šírka: 200px; výška: 164px; obrázok na pozadí: url(kiwi.png); )

Táto možnosť funguje skvele s ukladaním do vyrovnávacej pamäte a má najväčšiu podporu prehliadača zo všetkých vyššie uvedených možností. Ale konať s pomocou CSS pre takýto objekt budete musieť písať štýly priamo do súboru SVG.

...

Používanie údajov URI je spôsob, ako znížiť hmotnosť SVG. Mobilefish.com poskytuje na tento účel online optimalizačný nástroj. Stačí vložiť obsah vášho súboru SVG a vyplniť formulár, potom sa výsledok zobrazí v textovom poli, ktoré je možné skopírovať. Vyzerá to takto:

Tento kód môžete použiť kdekoľvek! Napríklad:

Logo ( pozadie: url(data:image/svg+xml;base64,); )

A mimochodom, ak máte inline štýl v SVG, ktorý je pred base64, bude fungovať, ak ho použijete ako objekt!