Hogyan készítsünk PNG SVG-t

SVG-t használunk az oldalon

Hagyja mögött a nadrágot az SVG használatának megvalósíthatóságának kérdése. Mindenkinek meg kell határoznia a technológia hasznosságát. Különösen azért, mert ez a téma indokolatlanul emelkedett.

Most megnézzük az SVG beágyazásának módszereit, azok előnyeit és hátrányait, valamint az SVG elemeinek manipulálásának lehetőségeit.

A cikk célja elsősorban azok számára, akik még mindig nem használja vektorgrafikus a telek, de tényleg azt akarja, hogy az egyik lábát a jelen.
A kíváncsi azonnal adjon meg egy konszolidált táblázatot:

Iconscriptimg, háttér-imageObjectinlineCSS manipuláció

JS manipuláció

SVG animáció

Interaktív SVG animációk

Részben1	Nem	Részben2	Igen
Részben1	Nem	Igen	Igen
Nem	Igen	Igen	Igen
Nem	Nem	Igen	Igen

1 megváltoztatható szín, méret, igazítás és egyéb rendes stílusok
A 2Stileket ki kell írni, vagy maga az SVG fájlban, vagy az SVG külső stílusával van összekötve a fájl elején:

Igazság szerint az SVG belsejében regisztrált stílusok is működnek, és az IMG vagy a Background-képcímke használatakor, de nincs értelme ebben.

Ikonikus betűtípus

Példa a Hab-ra

Igen, az SVG-től létrehozhat egy ikon betűtípust, ráadásul szabadon elosztott oszcillációs betűtípusok vannak. De számos súlyos korlátozás létezik. Mint bármelyik SVG betűtípus szimbólum ikon egy betűtípusban nem lehet több színnel.
Íme néhány szolgáltatás, ahol lehet letölteni kész ikonkészletekkel, vagy töltse le a saját, és hozza létre saját ikont

Figyelembe kell venni, hogy a saját betűtípus létrehozásakor meg kell konvertálnia az összes objektumot az úton. A címkék és attribútumok, amelyek kimaradnak: kör, rect, stroke, stroke-szélesség, töltse ki, töltse fel Relele.
Az Icoceter betűtípus használata esetén az objektum összes SVG eleme egy karakterre van kombinálva, és kölcsönhatásba léphet vele CSS és JS-en keresztül. Csak a betűtípus-szimbólummal léphet be: A méret méretével változtathatja meg a méretet, a színt használva a színt, Animál a CSS animációval vagy a JS-vel.

E megközelítés előnyei és hátrányai:
+Az ikon úgy viselkedik, mint egy betűtípus szimbólum, és az összes paraméter ugyanolyan módon van konfigurálva a CSS (méret, szín, igazítás stb.);
+Az egyetlen módja annak, hogy az IE 8-at további manipulációk nélkül működtethesse;
–Az SVG fájl minden eleme egy karakterre van kombinálva, így csak a CSS vagy a JS-t egyetlen egész számként kezelheti;
–Csak egyszínű ikonok vannak támogatva;
–Ha a betűtípus-terhelés sikertelen, akkor megjelenik a felhasználó, vagy nem jeleníti meg az ikonokat, vagy a kódexek egybeesése Unicode karakterekkel jelenik meg.

SVG objektumként

Sajnos (vagy szerencsére) Codepen és JSFiddle blokkolja a külső objektum letöltését a biztonság érdekében.
A beágyazás így néz ki:

Az objektum beágyazása az elment attribútum adatok, mint például iframe, hozzátéve, a jelölést a plug-in, így felveheti a kapcsolatot az elemek segítségével JS, de nem egészen a szokásos módon:

Érdemes megjegyezni, hogy a CSS-stílusokban az SVG elemek eltérnek a szabványtól, az SVG által támogatott stílusok teljes listája itt található.
Az SVG nem szokásos képként viselkedik, nem lehet aránytalanul átalakítani, a szélesség és a magasság beállítása. A belsejében lévő objektum a maximális területet foglalja el, és a tartályban középpontba kerül:

De az objektum lehet alakítani a CSS segítségével például a következők:

Az IE 8 és az alábbiakban nem támogatja az SVG-t a “egyáltalán” szóból, ha a webhelyének felhasználói között van ez a konkrét közönség, amit érdemes elhagyni és cserélni az SVG-t egy raszterképen. Ezt megteheti a különböző módokon, például a ModernIZR add .NO-SVG osztály Test:

Érvek és ellenérvek a területre:
+Akkor egy külső CSS fájl ellenőrzése stílusokat;
+SVG animációk és szűrők támogat;
+interaktív animációk támogatja;
–Az IE 8 és alatta kell cserélni a bitkép.

SVG img vagy background-image

Példa a Hab-ra

Mindkét módja annak, hogy beágyazhassanak valami hasonlót az objektumcímke segítségével, például lehetetlen megváltoztatni az arányokat a tartály szélességének és magasságának megváltoztatásával, de több korlátozással rendelkeznek.
Az SVG-hez csatlakoztatott külső stílusok nem működnek, a JS-en keresztüli kapcsolattartók nem fognak működni. Az SVG interaktív animációi nem is működnek. És az IE 8 és az alábbiakban szenvedő problémák továbbra is fennmaradnak.
De az SVG animációk mindkét esetben működnek.
Az IMG esetében normál képnek tűnik:

A háttérkép esetén rendszeres blokkként:

A háttérkép használatával is használhatja a Sprite, a PNG képeket, és megváltoztathatja a méretet a háttér méretével:

Tekintettel arra, hogy az emberek hány százaléka a Device-Pixel-Ratio képernyők, amelyek a fenti 1. és azok az eszközök nem támogatják az SVG nullához (ha van ilyen általában), akkor a média kifejezést csatlakozni SVG, csak nekik, És a többiek számára a PNG verzió használatához:

E megközelítések előnyei és hátrányai:
+SVG animációk és szűrők támogatottak;
+A háttérkép esetében az SVG Sprite alkalmazása;
–Nem lehet megváltoztatni az SVG elemek tulajdonságait CSS vagy JS-en keresztül;
–Az interaktív animációk nem támogatottak;
–Az IE 8 és az alatta kell cserélni a bitmap képet.

Inline svg

Példa a Hab-ra

Ebben a kiviteli alakban az SVG kód, amely bármely SVG fájl megnyitásával, szöveges dokumentummal, közvetlenül beágyazva az oldalkódba.
Kétségtelen, hogy egy ilyen kialakítás rontja a kód olvashatóságát, és növeli a kötetét, de új lehetőségek nyílik meg.

Például, miután egy sor ikonok a SVG fájl, akkor használja őket újra egyszerű design design:

ahol non_svg_element_idAz SVG fájl belsejében található elemazonosító.

Például az SVG transzformációk egyetlen elemre történő alkalmazása:

De ha benne az eredeti SVG, interaktív animáció alkalmazták az elem, például csattanó, mint a demo fent, akkor amikor egy objektum megkettőzése, az animáció indít minden eleme egyidejűleg.
SVG animációk és szűrők Ez a téma egy külön cikket, úgyhogy korlátozza csak egy exampleSVG szűrő (többet SVG szűrők), és egy példát az animáció (többet SVG animációk).
Az IE 8 és az alatti munkaképességének kötelező erejével valamennyire bonyolultabb, mint más lehetőségeknél. További jelölést kell hozzáadnia:

E megközelítés előnyei és hátrányai:
+nincs külső fájlok betöltése;
+Az SVG elemekkel való manipulációk CSS és JS-en keresztül elérhetőek;
+SVG animációk és szűrők támogatottak;
+Az interaktív animációk támogatottak;
+az elemek újrafelhasználásának képessége;
–Az oldaloldal kódja szennyezett;
–Az IE 8 és az alábbiakhoz további jelölést igényel, és cserélje ki a bitmap képet.

Következtetés

Minden módszer jó a saját módján, és a körülményektől függően bármelyiküket használhatja.
Ez a cikk elsősorban az SVG árnyalatának mestere, és remélem, hogy sokan hasznosak lesznek.
P.S. Minden jó és macska.