Az általunk használt svg Online
1 Meg lehet változtatni a színét, méretét, az összehangolás és más stílusok egyszerű szöveges
2 Styles kell felírni, vagy az SVG-fájl, vagy csatlakoztasson külső stílus SVG a fájl elején:
Az igazság stílusok az előírt SVG is működni fog IMG tag, vagy a háttér-kép, de ennek nincs semmi értelme.
Ikonochny font
Az érvek és ellenérvek E megközelítés:
+ ikon viselkedik, mint egy szimbólum a betűtípus és a szükséges beállítások az azonos keresztül CSS (méret, szín, igazítás, stb);
+ Az egyetlen módja, hogy a munka IE 8 anélkül, hogy további manipuláció;
- minden elemét az SVG fájl vannak kombinálva egy karaktert, így kezelni a CSS-t, vagy JS csak egységes egészként;
- támogatja csak monokróm ikonok;
- failover felhasználó vagy nem jelenik meg a betűtípus letöltés ikonok egyáltalán, vagy megfelelő ikonok kód Unicode karakterekkel jeleníti meg a megfelelő szimbólum.
SVG, mint egy tárgy
Sajnos (vagy szerencsére) codepen és jsfiddle blokk töltése külső tárgy biztonsági okokból.
A beágyazás a következő:
Object beágyazza elmement attribútum adatok, mint az iframe, hozzátéve befelé jelölés szerepel fájlt, így az elemek segítségével érhető JS, de nem egészen a szokásos módon:
Érdemes megjegyezni, hogy a CSS stílusokat SVG elemek eltérnek a normál, a teljes listát a stílusok által támogatott SVG itt található.
SVG nem úgy viselkedik, mint egy rendes képet, nem lehet aránytalan átalakítani, amelyben a szélesség és magasság. Object belül elfoglalja a legnagyobb területet, és középre a tartály:
De az objektum lehet alakítani a CSS segítségével, mint ez:
IE 8 alatt nem támogatja az SVG a szó „nagyon”, így ha néhány, a felhasználók a webhely Ez a különleges közönséget kell vigyázni, hogy ellenőrizze és cseréje svg a bitmap. Ezt meg lehet tenni sokféleképpen, például Modernizr hozzá a .no-svg osztály a szervezet számára:
Az érvek és ellenérvek E megközelítés:
+ akkor egy külső CSS fájl vezetési stílusok;
+ támogatja az SVG animáció, szűrőket
+ által támogatott interaktív animációk;
- az IE 8 alatt és ki kell cserélni a bitmap.
SVG IMG vagy background-image
Mindkét módszer beágyazó valami hasonló beágyazás a címke tárgy, például nem tudja megváltoztatni az arány a változás a szélessége és magassága a tartály, de sokkal korlátozottabbak.
SVG plug-in külső stílus nem fog működni, lásd az elemek révén JS csak nem fog működni. Interaktív animáció SVG sem működött. A probléma IE 8 és alatt is marad.
De SVG animációk fog működni mindkét esetben.
Abban az esetben, IMG vtraivanie úgy néz ki, mint egy normális kép:
Abban az esetben, a háttér-kép, mint egy szabályos egység:
Csak használja a background-image, akkor sprite, mint a PNG képet, és változtatni a méretét, akkor a háttér-size:
Tekintettel arra, hogy az emberek hány százaléka c képernyős készülék pixel arányt, amely nagyobb, mint 1, és a készülék nem támogatja svg nullához (ha van), akkor a média véleménynyilvánítási csatlakozni svg, csak nekik, hanem mások is használhassák png verzió:
Érvek és ellenérvek E megközelítések:
+ támogatja az SVG animáció, szűrőket
+ abban az esetben a background-image, akkor SVG sprite;
- nem tudja megváltoztatni a tulajdonságait SVG elemek révén CSS vagy JS;
- nem támogatja az interaktív animációk;
- az IE 8 alatt és ki kell cserélni a bitmap.
Soros SVG
Ebben a megvalósításban az SVG-kódot, amely lehet fogni, ha megnyitod SVG fájlt egy szöveges dokumentum, amely be van ágyazva közvetlenül az oldal kódját.
Kétségtelen, hogy ez a kialakítás rontja az olvashatóságot a kódot, és növeli a térfogatát, hanem új lehetőségeket.
Mint például az, ikonok az SVG fájl, akkor újra őket egyszerű szerkezete:
ahol some_svg_element_id id eleme a forrás SVG fájlt.
Ahhoz, hogy egyetlen elem lehet, például alkalmazni SVG átalakulás:
Az érvek és ellenérvek E megközelítés:
+ podgruzki nincs külső fájlokat;
+ manipulálható SVG elemek révén a CSS és JS;
+ támogatja az SVG animáció, szűrőket
+ által támogatott interaktív animációk;
+ a újrafelhasználhatóság az elemek;
- szennyezett oldal kódja;
- az IE 8 alatt és további jelölést, és helyébe egy bitkép.