Ako implementovať ikony SVG v rôznych prehliadačoch. Ako implementovať ikony SVG v rôznych prehliadačoch Základná integrácia prvkov SVG

Ikony, ktoré nájdete v týchto zdrojoch, je možné prispôsobiť tak, aby zobrazovali informácie v prezentáciách, zdobili vizitky, ponuky, letáky a podobne.

Písali sme, že ikony na týchto stránkach sú neškodné, no aj tak buďte pri sťahovaní opatrní, pretože sa môžu kedykoľvek zmeniť.

01. Smashing Magazine

22. PixelsMarket

26. Blugrafický

Blugraphic - možnosti PSD, PNG a vektorových ikon. Vyhľadajte značky alebo sa môžete prihlásiť na odber informačného kanála a pokúsiť sa získať bezplatné doručenie e-mailom.

27. Ikona Šok

Icon Shock - tisíce bezplatných ikon pre špeciálne vikoristny. Ak chcete pridať obrázok do komerčného projektu, musíte vykonať jednorazovú platbu.

28. Autor CSS

CSS Author predstavuje najlepší výber najkratších, bezplatných ikon v mixe.

29. Kreatívny chvost

Chcete nové ikony? Creative Tail má sady, ktoré inde nenájdete.

30. All-Free-Download

All-Free-Download sprostredkuje ľahký dotyk a priamy záujem o PSD, PNG a vektory.

31. Ikony ega

Ego Icons obsahuje viac ako 1 500 prémiových ikon a 100 bezplatných vektorových ikon. Podstránky zobrazíte aj kliknutím na tlačidlá v hornom navigačnom paneli.

32. Mimozemské údolie

AlienValley ponúka širokú škálu vysoko kvalitných ikon výmenou za vašu e-mailovú adresu.

33. Dreamstale

Dreamstale vám poskytne vynikajúce, bezplatné ikony prémiovej triedy pre autorov.

34.DuckFiles

35. 1001 bezplatných stiahnutí

+1001 Free Downloads sa špecializuje na ploché ikony, prezentované v rôznych krásnych a chimérických možnostiach.

36. GraphicsBay

37.Pixeden

Na Pixeden môžete vytvárať ikony v niekoľkých veľkostiach. K dispozícii je široký výber pohľadov od 16x16 do 512x512 palcov formát PNG.

38. Podstatné menoProjekt

NounProject - jednoduché vyhľadávanie, ľahká príťažlivosť vysoký jas Ikona. Posilannya na autora obov'yazkova. Členstvo s príspevkom nad tisíc nie je spoplatnené sťahovaním.

39. Iconmonstr

Iconmonstr zobrazuje ikony v niekoľkých veľkostiach bez uvedenia zdroja.

40. Fusionplate

Ikony PSD sú nepostrádateľným prvkom akéhokoľvek dizajnu používateľského rozhrania, ktorý neznižuje dôležitosť fontov, ale v praxi je zriedkavé, aby niekto navrhol vlastné ikony pre akýkoľvek webový projekt. Na druhej strane, hľadanie zodpovedných za jednoduchosť a dizajn ikon trvalo aj hodinu, no dnes sme sa vám rozhodli pomôcť a pripravili sme výber bezplatných sád ikon pre všetky typy života.

01.Ikony8

Icons8 - sada 20 tisíc plochých ikon v akomkoľvek formáte, veľkosti a farbe! Tu sú prezentované kategórie ako podnikanie, oblečenie, ježkovia a mnoho ďalších. Icons8 je možné stiahnuť z doplnku Mac alebo z archívu ZIP.

02.Freepik

Táto kolekcia vektorových ikon zo špecializovaného zdroja Freepik je len jednou z neosobných prezentácií. Je ideálny pre obchodné a osobné projekty. Okrem toho si môžete stiahnuť ikony PSD vo formátoch .AI, .EPS a .SVG.

03.Ikonový vyhľadávač

Táto sada ikon v čiernej a bielej farbe je kombináciou jasných funkčných a emocionálnych vektorových ikon. Okrem štandardných ikon táto sada obsahuje ikony, ktoré vyzerajú ako srdce a oči, čo vám umožní dať emocionálnu kontrolu nad projektmi.

04. 195 plochých vlajok PSD ikon

Vynikajúca sada ikon PSD pre stránku, ktorú možno použiť pri vývoji medzinárodnej stránky, internetového obchodu alebo blogu o cestovaní. Sada obsahuje 195 bezrezových ikon so zaoblenými kotletami.

05. Sada ikon používateľského rozhrania metra

Ak ste fanúšikom systému Windows 8, môžete si pozrieť túto bezplatnú sadu ikon. Obsahuje 700 dobre navrhnutých ikon, ktoré možno ľahko použiť v projektoch akéhokoľvek typu.

06. Moderné ikony používateľského rozhrania

Ďalšia sada bezplatných ikon, ktoré je možné vybrať pri vytváraní priradené k používateľskému rozhraniu softvérová bezpečnosť pre Windows alebo pre Android / iOS. Po zadaní svojich údajov si budete môcť vybrať 1 000 plochých, ručne vytvorených ikon, vrátane ikon pre záves aplikácií na Windows Phone.

07. Perfektné ikony s rozlíšením 350 pixelov

Neuveriteľná sada 350 dokonale jasných ikon pre doplnky a webové stránky. V takom prípade je možné meniť ich veľkosť bez straty šťavy.

08. 80 mini ikon

80 dokonale prehľadných miniatúrnych ikon, ktoré je možné stiahnuť vo formáte PSD aj vo formáte písma ikon. Tieto elegantné a sofistikované sociálne ikony PSD sú ideálne pre projekty akéhokoľvek typu.

09. Jednoduchá a praktická vektorová grafika webovej ikony

Neexistujú žiadne hnedé ikony, ktoré by sa dali použiť v špeciálnych a komerčných projektoch.

10. Bezplatné ploché ikony

Sada ikon zobrazených v plochom štýle, medzi ktorými môžete vidieť kalendár, e-mail, výročie, mapy a mnoho ďalšieho.

11. Mono ikony

Sada, ktorá obsahuje 108 jedinečných monochromatických ikon navrhnutých v minimalistickom štýle. Všetky obrázky sú dostupné vo formáte PNG s veľkosťou 32 x 32.

12. Metričné ​​ikony

Bezplatná kolekcia v štýle Metro, ktorú nájdete v oficiálnych prílohách a webových projektoch. Ikony sociálnych médií PSD sú bezplatné na osobné aj komerčné použitie. Archív obsahuje nielen formáty PSD, SVG, ESP a AI, ale aj webové fonty.

13. Ikony panela kariet iOS 7

Elegantná sada ikon, vyvinutá podľa technológií iOS 7, ktorú môžete použiť vo svojich aplikáciách. Ikony môžete ozdobiť v nasledujúcich formátoch: PSD, AI a ESP.

14. Robustná sada ikon Pika

Ikony v štýle Pika, ktoré vytvorila holandská agentúra Icon v Dánsku. Táto sada obsahuje 42 dokonale jasných ikon.

15.Ikonický

Ďalšia sada jednoduchých, ale atraktívnych ikon, ktoré sú ideálne pre minimalistický dizajn. Iconic je sada s otvoreným zdrojovým kódom, ktorú je možné importovať do formátov PNG, SVG, SWC a ďalších, čo umožňuje ich prispôsobenie vašim návrhom.

16. 44 odtieňov voľných ikon

Sada 44 ikon. Do fóra môžete umiestniť ikony PSD, čo vám umožní jednoducho ich upravovať a prispôsobovať iným projektom.

17. Sada ikon tokenu

Token obsahuje 128 jedinečných ikon, dostupných vo formáte ICO vo veľkostiach 16 x 16 pixelov, 32 x 32 pixelov a 256 x 256 pixelov, ako aj vo formáte PNG vo veľkostiach 128 x 128 pixelov iv. Ikona kože je prezentovaná v tmavej a svetlej verzii a je doplnená o súbor PSD.

18. Ploché ikony (PSD)

Reťazcové ikony v plochom štýle, ktoré si môžete stiahnuť vo formáte PSD a upraviť podľa svojich potrieb.

19. Bezplatná sada 32px ikon

Zadajte, kde nájdete ikonu PSD na akýkoľvek účel: Skype, Facebook, Twitter, RSS, šálka kávy, „páči sa mi to“ a oveľa viac.

20. 48 plochých dizajnérskych ikon

Ak ste fanúšikom minimalizmu, potom sa vám tento set určite zíde. Skladá sa zo 48 bezplatných ikon, ktoré predstavujú kancelársku prácu, sociálne aspekty a tiež ceny. Všetky obrázky sú prezentované vo formátoch AI a PNG a je možné ich zmenšiť bez straty kapacity.

21. Sada ikon Plex

Sada obsahuje viac ako 100 ikon, vrátane kalendára, antivírusu, výročia, e-mail, Doplnky spoločnosti Microsoft kancelária, sociálne opatrenia, A tiež veľa iných vecí.

22.Vector mini zadarmo

Výber z viac ako 1000 ikon PSD rozdelených tímom Icojam. Všetky obrázky sú prezentované aj vo formáte PNG. Sú ideálne na použitie pri vývoji nového webu, pretože sa dajú neškodne použiť v špeciálnych aj komerčných projektoch.

23. Eldorado mini zadarmo

Skvelá zbierka miniikonov od Icojamu, ktorá obsahuje viac ako 1200 ikon s rozmermi 40 x 40 pixelov.

Responzívny dizajn je populárna téma. Obrazovky už dávno presahujú štandardné rozlíšenia a stránky je možné zobrazovať na príslušenstve veľkosti údolia a na veľkých monitoroch. Stránka však musí vyzerať dobre bez ohľadu na veľkosť zariadenia a hustotu pixelov. Na prispôsobenie dizajnu a obsahu sa používa množstvo rôznych metód a technológií. Vektorová grafika, SVG, je podľa mňa v tomto smere jednou z najužitočnejších tém.

Grafiku SVG je možné ručne upraviť pre ikony tak, aby nevyzerali príliš veľké na sietnicových zariadeniach a mohli sa roztiahnuť bez straty mäkkosti.

Os, napríklad jeden sprite SVG za 4 v rôznych veľkostiach, Víkend - 32px:

SVG zvláda tieto úlohy efektívne a je dobrou voľbou na použitie v responzívnych rozloženiach.

Ikony pre dizajn je možné prevziať z hotových súprav alebo si môžete namaľovať svoje vlastné.

Sady hotových ikon

iconmelon.com

Veľká zbierka ikon rôznych typov. Ikony musia byť vložené do HTML pomocou dodatočného použitia.

icomoon.io

Najsilnejší nástroj. Môžete nielen vybrať a prispôsobiť hotové ikony, ale môžete si tiež prispôsobiť svoje vlastné a vybrať ich z písma a/alebo spritu. Spolu so spritom je možné vytvoriť jeho PNG verziu.

flaticon.com

Veľká zbierka, ikony sú ručne rozdelené do kategórií. Vybrané ikony je možné stiahnuť vo viacerých formátoch (font, SVG, PNG) alebo vo všetkých formátoch.

maľujeme sa

Na vytvorenie vlastnej sady ikon potrebujete vektorový editor:

• Adobe Illustrator je podľa mňa najlepší. 599 rubľov. / Mesiac na sklade pre predplatné Creative Cloud;
• Inkscape je bezplatný a nie je príliš praktický;
• Sketch – pre Mac OS, 79,99 USD. Existujú určité problémy s vektorizáciou ťahov, ale musíte to urobiť ručne.

Znížená vaga

Hotový SVG súbor by mal byť veľmi zábavný, no v každom prípade sa dá optimalizovať. Z kódu sa odstránia nepotrebné atribúty, medzery a prevody a zmení sa počet znakov za bodkou v číslach. Veľkosť súboru sa zmení o 30-50%. Nástroje na optimalizáciu:

grunt-svgmin- zavdannya pre Grunt s wikiristannyam svgo. V tomto prípade budú samotné súbory prevzaté z priečinka s výstupnými kódmi, optimalizované a uložené v priečinku s výsledkami. Naozaj šikovné.

Písmo sprite alebo ikony?

Font je šikovná alternatíva k sprite. Ak potrebujete ďalšie nástroje, nemusíte sa obťažovať mriežkou a preskupovaním ikon alebo ručným pridávaním nových symbolov.

S iným písmom sa dá pracovať nielen s jednofarebnými ikonami, ale aj s rôznymi farbami.

Vlastné písmo si môžete zaobstarať napríklad na stránke icomoon.io/app/. Približná postupnosť akcií:

1. Vyberte ikony zo sady a/alebo si prispôsobte svoje vlastné.
2. Kliknite na tlačidlo Písmo v spodnej časti.
3. Tu môžete zmeniť priradenie symbolov k ikonám alebo okamžite zmeniť písmo.

Spolu s fontom vo viacerých formátoch (.woff, .svg, .ttf, .eot) je potrebný CSS a demo súbor.

Vstavané písma fungujú v IE 8, ale v niektorých súčasných prehliadačoch môžu byť problémy s podporou. Opera Mini nepodporuje vlastné písma, Firefox vyžaduje kúzlo, aby server uložil písmo (na základe base64), Chrome môže pridať písmo, ak ste kartu natrvalo zakázali:

V prehliadači Chrome v systéme Windows 7 môže stránka s predvolenými písmami pri otvorení zamrznúť a v niektorých iných prehliadačoch sa namiesto ikon môžu stále zobrazovať ikony:

Obrázok z článku Chrisa Koeru Icon System s SVG Sprites. Prečo som sakra dostal hieroglyfy, ale boli tam SVG, takže nebolo možné vytvoriť obrazovku. CSS-triky, mimochodom, už aktívne vikoristujú SVG vo svojom novom dizajne a vývojári Codepenu v novom dizajne editora prišli s výberom ikonových fontov pre SVG bark.

Bez ohľadu na zložitosť skriptu, problémy s podporou fontov v súčasnosti sťažujú výber veľkosti ikon na SVG.

Chcel by som dúfať, že v budúcnosti budú písma lepšie podporované.

Ako nájdem spôsoby vloženia SVG na stranu?

škriatok

výhody:

• krátky čitateľný kód;
• obrázok sa uloží do vyrovnávacej pamäte;

nevýhody:

• aplikované na server;
• v starších operách sa s pozadím SVG zaobchádza inak: problémy môžu nastať pri pridávaní rámca k prvku s pozadím SVG a v Opere Mini sa spracúvajú iba pozadia bez viewBoxu;
• Ikony v sprite nie sú dostupné pre bočné štýly;
• Veľké škriatky môžu spôsobiť problémy s produktivitou.

Base64 v dátovom URI

výhody:

• Server nie je napájaný.
• dobrá podpora prehliadača: všetko okrem Opery na Presto a starého IE.

nevýhody:

• obrázok sa neukladá do vyrovnávacej pamäte a zakaždým sa vykreslí znova;
• dovga riadok v CSS;
• nečitateľné: nie je jasné, čo je s kódom zlé;
• zakódovaný obraz môže byť dôležitejší ako výstup;
• na kódovanie/dekódovanie požadovaných dodatočných nástrojov;
• Ikony nie sú dostupné pre štýly stránky.

SVG v URI údajov

• Server nie je napájaný;
• Vysoko čitateľný kód (možno prečítať alebo upraviť);
• nevyžaduje odfukovanie;
• Podporované všetkými modernými prehliadačmi, ktoré kódujú SVG.

nevýhody:

• NIE JE vo vyrovnávacej pamäti;
• dovga riadok v CSS;
• Ikony nie sú dostupné pre štýly stránky;
• Podporované iba prehliadačmi Webkit.

Použiť (znova navštíviť prvky SVG)

výhody:

• čitateľný kód;
• obrázky môžu mať názov a popis;
• pre bočné štýly sú k dispozícii symboly. Môžete tiež nastaviť výplň ikon \u003d "aktuálna farba" a farby sa vyplnia spolu s textom.

nevýhody:

• vložené priamo do HTML. Pred zástupnými prvkami sa vinníci objavia v hornej časti stránky v online SVG. Možno existuje aj sofistikovanejší spôsob prepojenia knižnice prvkov, ale to sa mi nepodarilo zistiť.

písmo

výhody:

• manuálny kód;
• Jedna z metód je podporovaná v IE8 bez výpadkov;
• Ikony sú k dispozícii pre štýly stránky a budú pridané spolu s textom.

nevýhody:

• Ak písmo nebolo upravené (ešte nebolo upravené, ešte nebolo upravené alebo už bolo upravené), namiesto ikon budú písmená alebo symboly Unicode alebo nič.

Živý príklad s podporou prehliadača:

Príklad reprezentácií je nasledujúci, bez snahy zabezpečiť konzistentnosť s rôznymi prehliadačmi. Môžete si otvoriť demo vo svojom prehliadači a vidieť, ako sa používajú rôzne metódy.

Zobrazovanie ikon v prehliadačoch bez podpory SVG

V súčasnosti je najjednoduchším a najspoľahlivejším spôsobom vkladania pomocou sprite.

Ak chcete nahradiť obrázky v IE8 a staršom, môžete použiť metódu s viacerými pozadiami:

Ikona (obrázok na pozadí: url (vaša.png); / * PNG pre IE6-8 * / obrázok na pozadí: url (vaša.svg), žiadna;)

Pre staršie opery môžete použiť nasledujúci selektor:

Neexistuje: -o-prefocus, .icon (obrázok na pozadí: url (vaše.png);)

Týmto spôsobom môžete zabezpečiť, aby ikony na počítačoch s rôznymi prehliadačmi vyzerali približne rovnako.

Z ostatných spôsobov vkladania ikon je najvhodnejšie písmo. Bolo by to perfektné, takže s podporou by nebol problém. Použitie Nepáči sa mi miešanie rozloženia a dizajnu, ale páči sa mi prístupnosť pre CSS a možnosť pridať názov a popis. Ďalšia veľmi dobrá, ale nie veľmi dobrá metóda povzbudenia, ale téma na ďalší príspevok.

UPD: Skvelé

V tomto príspevku ukážem, ako implementovať ikony SVG, metódu na implementáciu núdzového režimu a tiež ako premeniť ikony na sprite SVG.

Základná integrácia prvkov SVG

Špeciálne pre túto lekciu vyzdvihnem jednu stránku, ako používať online vizitky pre váš účet. Stručne predstavím moje služby a ukážem tri profily z odborných línií, ktoré ležia pred mojou prácou. Budeme vikorizovať ikony SVG.

Pre snímku obrazovky si môžete stiahnuť aj ikony (Twitter, Dribbble a GitHub), ktoré symbolicky odkazujú na vaše pracovné profily. Tieto ikony som si stiahol z flaticonu, takže vo vektorových a rastrových formátoch neboli rozdielne ikony a symboly.

PNG a SVG

Teraz vytvoríme PNG verzie týchto ikon kvôli konzistentnosti so staršími verziami a potom pripravíme SVG ikony na použitie v podporovaných prehliadačoch.

Sketch som používal na vytrhávanie ikon PNG a znova ho používam na prípravu ikon SVG.

Ak sa pozriete na snímku obrazovky, všimnete si, že som pomenoval všetky skupiny a tvary v ľavom paneli rovnakým názvom (v Adobe Illustrator je rovnaký zoznam na paneli Vrstvy). Je veľmi dôležité správne pomenovať všetky víkendy, nielen preto, aby ste pomohli dobre zorganizovať projekt, ale aj pomohli v ďalších fázach hodiny.

Exportujte verzie SVG

Teraz exportujem ikony do ikon SVG, čo je oveľa jednoduchšie urobiť pomocou dodatočného nástroja na rezanie v Sketch (Slicing). Podrobnejší popis fungovania týchto možností nájdete v časti Rozšírený export v aplikácii Sketch. Exportujem ich ako súbory a umiestnim ich do priečinka obrázky v mojom projekte.

Za normálnych okolností, ak chcete zobraziť obrázok na stránke, prejdite na zdroj pre ďalší prvok s atribútom src alebo niečo podobné:

Okrem súborov SVG existuje mnoho ďalších spôsobov, ako môžete do dokumentu HTML pridať farbu. Môžete napríklad priamo vikorizovať kód SVG - os zodpovednosti je možné vidieť približne:

Toto je jedna z ikon, ktoré som exportoval vo formáte XML. Tento kód je veľmi podobný HTML (jeho štrukturálny formát), čo znamená, že ho môžeme vložiť priamo do strany.

Pridanie SVG do HTML

Pozrime sa na základnú stránku HTML, ktorá obsahuje ikony PNG s ich kotvami a kontajnerom:

Teraz skopírujem a prilepím kód SVG, aj keď horný riadok budem ignorovať kvôli povahe súboru a ďalším detailom atribútov. HTML dokument už obsahuje informácie a nie je potrebné ho duplikovať.

SVG som umiestnil priamo nad príslušné ikony PNG na stránke HTML. Zatiaľ zabalím riadok pôvodných obrázkov PNG do značky komentára, aby sa nezobrazoval v rovnakom poradí ako verzia SVG

Čistič SVG

Vyčistím aj kód v mojom SVG. Odstránenie prvkov atribútov je voliteľné, pretože väčšina fragmentov, ktoré vidím, nemení správanie SVG. Kód je pred a za, len v prípade, že chcete urobiť to isté:

Žasnúť nad prvkami, ktoré som videl. prvky The

Potom tam musím umiestniť ikony. Nemusíte prenášať celé SVG, ale namiesto toho z neho stačí prvok skupiny. Môžem to dať do prvku

Poznámka: Určite by ste mali vyskúšať Grunt, doplnok, ktorý automatizuje spracovanie všetkých súborov SVG.

Dobrý deň!

Teraz máme všetky ikony SVG v hlave a musíme ich chytiť; Do nového svg\u003e sme pridali atribút display \u003d „none“, čo znamená, že na bočnom paneli sa nezobrazí žiadna z ikon.

Ikony starostlivosti o pleť SVG

Ďalej označíte ikonu vzhľadu, aby ste ju mohli vybrať na stránke, z ktorej ste predtým odstránili prvok defs. Za touto značkou musíte zabaliť všetky skupiny, zrejme zalomiť všetky ikony, môžem naznačiť, že chcem, aby sa znova zobrazili na stránke.

Ako používať ikony SVG

Ikony sú teraz označené, ale musíte tiež označiť spôsob ich výberu a prvok, ktorý sa má použiť. prvok vám umožňuje prevziať akýkoľvek prvok z a kliknite naň na ľubovoľnom mieste na stránke. Prvok vyberáme podľa jeho ID, preto je dôležité správne pomenovať ikony v dokumente Sketch. Čuduj sa ID v aplikácii, a ako sa spolieham na kožu, vikoristu a živlu .

Ak ste urobili všetko, ako ja, a neurobili ste žiadne chyby, potom nerobte žiadne zmeny v zobrazenej grafike, ale teraz môžete znova vytvoriť ikony SVG (v akejkoľvek veľkosti, ktorú potrebujete) a vybrať vzhľad podľa potreby raz na stránke.

Poďme si plne prispôsobiť nášho sprite SVG

Ďalšou výhodou používania spritov SVG je, že kód bočného panela je oveľa čistejší a ľahšie čitateľný pre ostatných ľudí, ktorí tiež pracujú na stránke. Výsledok môžeme ešte trochu vyleštiť. Nižšie som vymenil prvky v mojom sprite SVG na prvku symbol, plus som presunul atribút viewbox z prvkov SVG na stránke do nových prvkov symbolu.

Vikoristannya V mojej aplikácii je to nielen správne zo sémantického hľadiska, ale tiež eliminuje potrebu opakovať atribút viewbox spolu s prvkami Poznámka: Pamätajte, že namiesto prvkov Po dokončení sa zobrazí v IE7.

Zmena prvku skupiny na symbol. Všetko toto vylepšenie vieme implementovať. Môžete zobraziť prvok So sprite SVG je kód ešte čistejší.

visnovok

To, čo začalo jednoduchými rastrovými ikonami, sa zmenilo na super výkonnú sadu vektorovej grafiky, ktorú možno ľahko zostaviť podľa potreby a v akejkoľvek požadovanej veľkosti. Dúfam, že sa poučíte a budete pokračovať v experimentovaní a vytváraní ikon SVG vo svojom ďalšom projekte.

Príprava SVG na použitie na internete je veľmi jednoduchý proces, ktorý nie je náročnejší ako export JPEG alebo PNG. Vikorize akýkoľvek grafický editor, ktorý je váš primárny (Illustrator, Sketch, Inkscape atď.) s veľkosťou obrázka, ktorý plánujete vikorist. Ak pracujem v Illustratore, vysvetlím rôzne spôsoby prípravy súborov v tomto programe, aby sa dali uložiť pre akýkoľvek iný program. Možno budete chcieť preložiť text do krivých, zošrotovaných fontov, ktoré vyzerajú, že všetko bude vykreslené nesprávne, pretože, samozrejme, neplánujete ich štylizovať pomocou dodatočného webového písma, ktoré je na stránke vicorizované (čo je možné! ). Tiež nie je dobrý nápad konvertovať všetky objekty do jednotlivých formulárov, najmä ak máte obrysy, ktoré je potrebné spravovať na boku, pretože konverzia viacerých objektov často nezmení veľkosť súboru. Akékoľvek názvy priradené skupinám alebo verziám sa pridajú do SVG ako ID prvku. Vykonajte to manuálne kvôli štylizácii alebo len mierne zväčšite celkovú veľkosť súboru.

Pred exportom sa musíte uistiť, že všetky obrázky majú veľkosť celého čísla v pixeloch (napríklad nie 23,3 pixelov × 86,8 pixelov). V opačnom prípade chýba celému obrázku jasnosť a časť obrázka je orezaná. S aplikáciou Illustrator môžete pracovať s nadchádzajúcou hodnosťou: Objekt\u003e Umelecké plátna\u003e Prispôsobiť hraniciam umeleckého diela. Potom stlačte uložiť ako a vyberte SVG a opustite nastavenia. Tu môžete urobiť malú optimalizáciu, ale v skutočnosti to nie je také dobré, pretože v budúcnosti budeme uviaznutí pri rôznych metódach, takže nebudeme strácať voľnú hodinu týmito nastaveniami.

Pokračujte v zmene veľkosti súboru.

(Pozrite si optimalizáciu)

Na dosiahnutie čo najmenšej veľkosti SVG by bolo logické vymazať z neho celý súbor. Najpopulárnejší a najužitočnejší program (myslím si, že áno) na spracovanie SVG je SVGO. Odstráni všetok nepotrebný kód. Ale! Ak plánujete spravovať SVG za dodatočným CSS/JS, rešpektujte svoj program, pretože to môže príliš vyčistiť kód a sťažiť budúce zmeny. Ďalšou výhodou SVGO je, že ho možno zaradiť do procesu automatického vytvárania projektu a možno ho použiť aj ako nástroj GUIčo len chceš.

Pochopením zostavy so správnymi typmi všetkého zbytočného môžeme v grafickom editore zarobiť ešte viac. Najprv musím prekonfigurovať, aby bolo možné rozloženie niekoľkých obrysov/tvarov, ako aj bodov na týchto obrysoch. Môžete kombinovať a zažiť všetko, čo sa dá zjednodušiť, a odstrániť všetky nepotrebné body. Illustrator má doplnok VectorScribe s nástrojom Smart Remove Brush Tool, ktorý vám pomôže odstrániť body a tým odstrániť pôvodný tvar.

dopredná optimalizácia

Výber bodov nástroja Smart Remove Brush Tool

Ďalej obrázok vylepšíme. V aplikácii Illustrator môžete manuálne zapnúť View\u003e Pixel Preview, aby ste videli, ako sú obrysy tieňované. Umiestnenie obrysov na mriežku bude trvať o niečo viac ako hodinu, ale stále sa to oplatí a umožní vám dosiahnuť jasnejšie vykreslenie (lepšie ako súčasne sa otáčať).

Body mriežky držania tela

Virácia podľa siete

Ak existujú dva alebo viac objektov na overenie, môžete odstrániť všetky nepotrebné prekrytia. Niekedy sú kontúry príliš silné a môže byť viditeľná tenká biela čiara. Aby ste tomu zabránili, môžete objekty prekrývať jeden po druhom na miestach, kde sa prekrývajú. Dôležité: v SVG je z-index v rovnakom poradí ako objekt nižšie, takže horný objekt môžete umiestniť na spodok súboru v kóde.

A samozrejme je dôležité, aby si tí, ktorí na to zabudli, neaktivovali gzip komprimované SVG na vašom webe v súbore .htaccess.

AddType image / svg + xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml"\\"text/css"\\"text/html"\\"text/javascript" ...atď

Ako príklad efektívnosti tejto techniky rýchlo používam pôvodné logo Breaking Borders a optimalizujem ho týmto spôsobom: väčšia veľkosť do tej miery, do akej je to na vine; Dám kontúry do poriadku; Uvidím čo najviac bodiek; Presuniem body na celočíselné pixely; Zničím všetky prekritické oblasti a pošlem všetko SVGO.

Originál: 1.413b

Po optimalizácii: 409b

V dôsledku toho sa veľkosť súboru zmenšila o ~ 71 % (a o ~ 83 % pri kompresii)