Konečný průvodce SVG

Představte si, že můžete vložit obrázek na webovou stránku, velikost stránky na libovolnou velikost a nikdy neztratit kvalitu obrazu. No, můžete. Je to naprosto možné, prostě jsme to neudělali stejně, jako bychom měli.

Snímky s pevnými velikostmi, jako jsou soubory JPG, GIF a PNG, mají své místo na webu, ale jejich přirozená statická povaha je v konfliktu s tím, jak se web pohybuje. Jak se dostáváme k citlivým, tekoucím vzorům, tím dráždivějším, že se musí vypořádat s obrazy, které zásadně neodpovídají . Je to frustrující přesvědčení, když si uvědomuji, že se stává nejlepší praxí vytvářet a obsluhovat několik různých verzí každého obrázku na vašem webu.

Uvědomuji si, že pro to existují dobré technické důvody. Bude to dlouho, než někdo vytvoří nekonečně měřící fotografii, například. Fotografie však nejsou obrazem všeho a koncem. Vektorová grafika je velmi dlouhá cesta. Dělají ještě dlouhou cestu.

Mohou být obtížnější získat, protože ne každý webdesigner je ilustrátor. Fotky jsou hojné a dobré snímky jsou snadno dostupné. Vektorová grafika je na druhé straně často nízké kvality, nebo snad prostě nemůžete najít správnou. Najímání ilustrátorů je drahé.

Ale jak podpora pro vektorovou grafiku roste on-line, tak bude jejich použití. Je načase, aby se každý naučil, jak je implementovat na svých webových stránkách a kreativně je využívat. Obrázky, které odpovídají našim webovým stránkám, jsou budoucnost.

Splnění souboru SVG ...

Co je to SVG a proč byste ho měl používat?

Dobře, pro nováčky mezi námi, SVG znamená škálovatelnou vektorovou grafiku. Soubory SVG jsou teoreticky spíše jednoduché. Jsou to jen textové soubory se spoustou XML uvnitř. Každý bit vizuální informace v souboru SVG je definován kódem, který je čitelný pro člověka, který pak vypočítá a vykreslí váš prohlížeč, grafický software atd.

To znamená, že i když soubory SVG nejsou tak složité jako například fotografie formátovaná jako JPG, jsou nekonečně flexibilnější. Mohou být změněny ručně v textovém editoru. Mohou být změněny kódem, jako je JavaScript a CSS. Mohou být komprimovány do téměř směšně malých rozměrů.

Jinými slovy, jsou speciálně navrženy tak, aby byly použity vedle jiných webových technologií. Jsou perfektní pro nás.

Koncem devadesátých let představili společnosti Macromedia a Microsoft (a další společnosti) VML , a poté společnost Adobe (a další společnosti) PGML jako možné řešení pro vektorové obrázky na webových stránkách W3C (a možná i jako alternativy starého PostScriptového formátu). W3C řekl: "Ne, uděláme vlastní věci; ale díky za nápady! "Výsledkem bylo Pracovní skupina SVG.

V září 2001 se SVG 1.0 stalo oficiálním doporučením W3C a zbytek je historie. Něco takového. Internet Explorer zaostával za přijetím formátu SVG, který nikdo nepřekvapil. Od té doby se objevily aktualizace zaměřené na mobilní zařízení a více s objasněním.

Dokonce i nyní pracuje SVG Working Group na vytváření SVG 2, který bude zahrnovat integrační integraci s věcmi jako HTML5, CSS a formát písma WOFF.

Má podporu

Jediná verze aplikace Internet Explorer, o kterou se teď musíte obávat, je IE8. A je to. Všichni ostatní mají více či méně úplnou podporu SVG. Ano, můžete občas narazit na chyby, dokonce i v "dobrých" prohlížečích, ale stále stojí za to. Nejenom, že kolem nich budete pracovat, budou vaše schopnosti řešit problémy ostrými, ale čím více používáme tuto technologii, tím více vývojářů prohlížeče ji podpoří.

Překontrolovat caniuse.com pro podrobnější analýzu toho, co funguje a co v jakých prohlížečích.

Všechno je citlivé ... nebo by mělo být

Internetová technologie prošla cestou, přesahující statické webové stránky, které jsme dříve věděli. Je načase, aby se naše snímky zvedly, prosté a jednoduché. Když musíte vytvořit ikonu, použijte SVG. Když budete muset použít ilustrace, jděte na SVG, pokud můžete. Chcete-li abstraktní, ale stále jednoduché pozadí webu, použijte SVG.

Nejsem fanouškem technologie obrazovky sítnice, zejména proto, že nemám jednu. Není to žárlivost. No, není to jen žárlivost. Jednoduchým faktem je, že obrazovky Retina zmizely a dělaly si obrazy mnohem komplikovanější. SVG, který je nekonečně škálovatelný, může pomoci minimalizovat problém.

Přístupnost

Uživatelé se zrakovým postižením obecně procházejí webem se všemi malými zvětšeními. Když se zvětší běžný obraz, ztratí se kvalita. SVG to neudělá, tak proč to nevyužijete, abyste poskytli zrakově postiženým kvalitní zážitek?

Pomůže vám v tom, aby vaše webové stránky byly pro budoucnost

Technologie se stále mění. Co je tu dnes, mohlo by se nějakou chvíli zmizet, ale SVG bude s největší pravděpodobností po nějakou dobu nějaká chvíle. Dokud W3C nastaví globální průmyslové standardy, zdá se, že SVG bude i nadále ve skutečnosti standardem de facto pro vektorovou grafiku v prohlížeči. Použijte jej nyní a vaše webové stránky budou nastaveny na dobrou, dlouhou dobu.

SVG tutoriály a postupy

Takže jste přesvědčený. SVG je v pohodě, je to budoucnost, je čas naučit se to. Naštěstí pro všechny, to je internet. Jenom víte, že lidé strávili hodně drahé hodiny a vytvářeli si bezplatný výcvikový materiál pro každého, kdo je chce. Lidé, kteří takovou věc dělají, jsou lidé, kteří dělají internet úžasný.

Pak jsme samozřejmě šli a strávili několik hodin prohlížením různých cvičení, abychom našli ty nejlepší. Můžete nám poděkovat později. Prozatím je třeba číst!

Poznámka: Mějte na paměti, že soubory SVG jsou všechny kódy XML, takže mnoho z těchto výukových programů je zaměřeno na vývojáře nebo prostě má v nich mnoho kódu. Zahrnuli jsme jak tutoriály zaměřené na základy, tak i na konkrétní kreativní použití pro SVG, takže tuto část nevynechejte.

• Použití SVG: Chris Coyier napsal na css-tricks.com snadno srozumitelné CSS a HTML tutoriály. Jeho primer na SVG není jinak. Budu obsahovat odkazy na spoustu základních vysvětlení a tutoriálů, ale to je místo, kde bych začal. Tento tutoriál obsahuje základní pokyny pro uživatele aplikace Adobe Illustrator.
• Jak začít se SVG: Byl bych vadný, kdybych nezahrnul Vlastní příspěvek WDD k výuce SVG. Neustále fantastická Sara Vieira zahrnuje tvorbu grafiky, export, čištění kódu, přesouvání prezentačních atributů do souborů CSS a další.
• Řešení Nezávislost S SVG: Pokud je to webově příbuzné, pak Smashing Magazine pravděpodobně má článek o tom. Pokrývají základy formátu SVG s jejich obvyklým stylem a pozorností k detailu.
• Škálovatelná vektorová grafika (řada článků): Hongkiat.com je dalším zdrojem pro kvalitní vzdělávání v oblasti webových a grafiky. Místo toho, aby poskytli jen jeden dlouhý článek, zveřejnili celou sérii Thoriq Firdaus. Angličtina je někdy trochu chybějící, ale pokyny jsou stále jasné a snadno pochopitelné.
• Sara Soueidan: Styling a animace škálovatelné vektorové grafiky s CSS: To je video prezentace která je uvedena na CSSconf EU 2014. Sara Soueidan nabízí řadu tipů, triků a dokonce i několik hacků pro použití stylů a animací na webu SVG. Je to půlhodina dlouhá, takže se pohodlně ujistěte, že máte po ruce poznámky. Je to úplně vyplatí váš čas.
• Exportování SVG pro web pomocí Adobe Illustrator CC: Uživatelé aplikace Adobe Illustrator by měli koukej na tohle. Jeden z vlastních blogů společnosti Adobe poskytuje podrobné a myslím velmi podrobné pokyny, jak exportovat soubory SVG pro web. Naučte se, jak je optimalizovat až na nejmenší velikost souboru pro web.
• SVGBasics: Toto celé webové stránky je věnována výuce lidí, jak vytvořit grafiku SVG od nuly s XML. Doporučuji to, pro koho se zabývá skutečný back-end - nebo dokonce front-end - na jakémkoli webu. Vědět, jak funguje kód, může vydat dlouhou cestu k řešení problémů za běhu.
• SVG výuka Jakoba Jenkova: Další developer-centric soubor výukových programů, tady. Velký rozdíl? Autor zahrnoval video verze každé sekce. Pokud se naučíte lépe tím, že budete mít s výukou vizuální i zvukové informace, je to dobré místo pro začátek.
• Jednoduchý úvod do animace SVG: Titul říká všechno. David Walsh vysvětluje, jak nastavit svůj SVG prvky pro animaci, který se používá pro různé prvky, které knihovny mají používat a další. Není to úplný průvodce, ale představí vám základní pojmy, které jsou nezbytné k zahájení animace.
• Úvod do animace SVG: Tento tutoriál jde o trochu podrobnější informace o tom , jak přesně animovat SVG objekty. Kromě toho se zabývá některými běžnými problémy, které by mohly narazit při animaci, takže stojí za to číst.
• Jak: Exportovat více obrázků do souborů SVG z aplikace Adobe Illustrator: Vytvoření souboru ikon SVG v aplikaci Illustrator? Uchovávat je všechny v jednom souboru Illustratoru? Exportujte je všechny na jejich samostatné soubory jediným kliknutím.
• Animace textu pomocí cest SVG: Znává přesně to, co se v názvu vyskytuje. Získejte animaci, možná použít na logotyp. Určitě vypadá dost chladně ...
• Animovat SVG ikony s CSS3 a JavaScript: Jeden z největších použití SVG je pro ikony a s dobrým důvodem. Vytvořte jeden soubor, použijte ho kdekoli ve vašem webu nebo v libovolné velikosti. Co víc byste mohl požádat? Tento tutoriál ukazuje, jak animovat tyto ikony na vznášedle.
• Vytvoření škálovatelného SVG Infographic: Infografy jsou jedním z nejoblíbenějších způsobů, jak v dnešní době spotřebovat fakta. Proč ne dělat je nekonečně škálovatelný? Vhazujte do nějaké animace a vy jste mohli velmi dobře vyfouknout.
• Vytvoření tlačítka SVG HTML Burger: Řekněte, co chcete o tlačítko hamburgeru, pravděpodobně nikam nepůjde. Můžete také dobře používat SVG a animaci aby to bylo nejsvětlejší, nejlepším hamburgerovým tlačítkem. Toto se týká způsobu, jak oživit cesty a tahy, aby se jedno tlačítko doslova změnilo na jiný, a tak se mu podívejme.
• Příklady a návody Snap.svg: Toto je návod k použití knihovny JavaScript Snap.svg (viz část "Nástroje" níže). Je navržen tak, aby vám pomohl začít vytvářet prvky SVG v JS a animovat je, dělat je interaktivní a podobně.
• Úvod do Raphaël.js: Raphaël.js je jednou z velkých knihoven JavaScriptu souvisejících s SVG a tento článek učí vás, jak ji používat. (Opět viz část Nástroje níže.)
• Animovaná ikona SVG: Zdá se, že se lidem hodně líbí animované ikony, takže se můžete stejně dobře naučit každý přístup k tomu, abyste je dokázali. Tady vidíme knihovnu Snap.svg v akci ještě jednou, protože autor vytvoří a poté animuje tlačítko přehrávání médií.
• Ořezávání v CSS a SVG - Vlastnost a element klipové cesty: Zde je a pěkný dlouhý článek o tom, jak používat svorky SVG k vytváření snímků uvnitř tvarů a obrázků uvnitř obrovského textu. Mohli byste zvážit jeho použití, aby se velké fantazie nadpisy, které jsou SEO přátelské, protože motory vyhledávače je může číst.
• Zpracování SVG pomocí CSS: Přestože jsou soubory SVG nekonečně škálovatelné, způsoby, jak je vložit do webové stránky, mohou někdy způsobit problémy. Tento tutoriál z codrops vysvětluje, jak opravit různé problémy, se kterými se můžete setkat.
• Tvar hoveru s SVG: Vytvořte hladký a elegantní vzhled animovaný vznášedlivý efekt pro náhledy obrázků. ( Podívejte se na demo. ).
• SVG Primer pro dnešní prohlížeče W3C: Ne tak docela poslední a v neposlední řadě to máme poskytnutého zdroje lidmi, kteří přišli s celým SVG formátem na prvním místě: W3C. Není to základní výukový program nebo úvod. Podle předmluvy byl vytvořen pro profesionální programátory, grafické návrháře s "silným technickým ohýbáním" a další, kteří nevadí, že se dostanou do nittové skvrny.
• SVG Tutorial od MDN: Stejně jako SVGBasics to je spíše rozsáhlá sada výukových programů, poskytované sítí Mozilla Developer Network. Rozsáhlý, jak je, i když samotný tutoriál je považován za "ve vývoji". Například to může být vidět na stránce "Filtry", která je prázdná. Podle samotné stránky je tutoriál v rané fázi vývoje. Pokud jste schopni, pomozte nám pomoci čipováním a psaním odstavce nebo dvou. Další body pro psaní celé stránky.

Nástroje SVG

Jednou z mnoha výhod SVG je otevřená povaha je to, že kdokoliv může udělat software pro to. Neexistují žádné licenční omezení nebo poplatky za platbu, jen otevřený standard pro lidi k použití. Jak můžete očekávat, mnoho vývojářů to udělalo přesně.

Nástroje pro tvorbu a použití formátu SVG jsou velké. Ty se pohybují od velkých softwarových balíčků, které obsahují možnost exportovat SVG jako nápad, do vektorových výkresových aplikací, které jako primární formát používají SVG a další.

Rychlé vyhledání nástrojů SVG v Googlu vrátí "O 37 000 000 výsledcích", takže víte, že je tam hodně.

Kde tedy, měl bys začít?

Prémiové aplikace

Velké názvy v grafické tvorbě podporují SVG. Adobe Illustrator,Corel Draw, dokonce i různé výrobky z Xara - Ano, Xara je stále věc - mohou importovat, upravovat a ukládat soubory ve formátu. (Illustrator je však známo, že do souborů SVG přidává některé zvláštní věci, takže musíte být opatrní s nastavením exportu.)

Inkscape

Pokud ještě nepoužíváte vektorovou grafiku, Inkscape je fantastické místo pro začátek. Vytvořen v roce 2003 jako vidlice dalšího projektu s otevřeným zdrojovým kódem s názvem Sodipodi (který byl založen na dalším projektu OSS), Inkscape se stala standardem pro bezplatný vektorový grafický software napříč platformou. Není to tak úplně plnohodnotné jako Adobe Illustrator, ale je to víc než dost pro většinu vektorových projektů.

Serif DrawPlus Starter Edition

Serif je společnost, která dělá docela dobrou tvorbu grafiky a desktop publishing software. Všechny jejich hlavní softwarové nabídky přicházejí s bezplatnými "Starter Editions" a jejich aplikace pro kreslení vektorů není výjimkou.

Nedovolte, aby vám verze "Starter Edition" bláznila. Nemusí mít vše, co pro verzi dělá, ale ve většině případů to může udělat. Pokud nejste ilustrátor obchodem, tato aplikace může a bude splňovat vaše potřeby ... za předpokladu, že jste na systému Windows. Bohužel to není cross-platform. Pro stahování je také požadována registrace.

Karbon

Součástí kancelářské aplikace Calligra, která je určena především pro Linux, Karbon je plně vybavený vektorový grafický editor. Má všechny základní nástroje a kromě toho pár věcí. Instalace na počítačích Mac a Windows je v současné době obtížná, i když nemožná.

PrintDesign

Jméno znělo jako softwarový balík z 90. let, vím, ale je to vlastně docela nové. Ve skutečnosti je to nástupce staré ilustrační aplikace sK1, která byla přerušena. PrintDesign je v současné době ve fázi náhledu a má verze Linux i Windows. Není to ještě hotové pro výrobu, ale je to projekt, který stojí za pozornost.

SVG-edit

Jméno je trochu na špičce, ale software je víc než schopný. SVG-edit Jsou založeny výhradně na webových technologiích, konkrétně HTML5, JavaScript a CSS. To znamená, že neexistuje žádná funkce na straně serveru. A co víc, je to Open Source, což znamená, že si ho můžete stáhnout, umístit na svůj vlastní server nebo dokonce ho použít přímo z počítače.

Má to seznamu funkcí dostatečně dlouhé, aby mnoho aplikací na ploše žárlilo a běželo rychleji než většina z nich, a tak jí dát víru.

Janvas

Janvas je jedinou webovou aplikací na tomto seznamu, která není zcela zdarma. K dispozici je třicetidenní zkušební doba, po které se předplatné stává 26 EUR ročně. Pokud však žádný z ostatních editorů SVG na webu neuspokojíte, můžete ji skutečně uvažovat.

Výkresové nástroje jsou pokročilé a dostatečně známé, každá proměnná je upravitelná v postranním panelu a dokumenty můžete uložit na Disk Google. Můžete vytvářet šablony, spolupracovat na výkresových dokumentech a dokonce obsahovat soubory CSS a JS vytvořené pro interakci s grafikou.

Celkově je to solidní nabídka.

Mondrian

Malý. Elegantní. Jednoduchý. Mondrian je další open source nabízejí a jsou mnohem menší než většina. Nemá ani textový nástroj ... ale dělá jednoduché kresby velmi dobře. Můžete otevřít soubory z pevného disku nebo adresy URL, uložit kód pro vložení vašeho webu nebo jen uložit svůj výkres jako SVG nebo PNG. Nemusí to být tak pokročilé jako ostatní aplikace, ale je to prostě hezké a nástroj pro pero je přirozený.

Nakreslete SVG

Nakreslete SVG je další webový editor SVG se všemi funkcemi, které byste někdy potřebovali. Zdá se, že nejsilnějším bodem je naprostá rychlost, s jakou nakládá a kreslí věci. Je však smutné, že uživatelské rozhraní je vážně chybné. Přesto je to tam a funguje to, kdybyste někdy potřeboval.

Knihovny SVG

Vývojáři se radují! Máme zde také nějaké odkazy. Koneckonců, SVG není jen další grafický formát. Je to kód. Je to kód, který lze propojit nebo vložit. To může být ovlivněno a změněno za běhu. S matematikou!

Snap.svg

Snap je knihovna JS pro generování a interakci se SVG. Je určen pro moderní prohlížeče. Ano, to znamená, že podporuje pouze IE9 + ... ale pokud starší prohlížeče nejsou vaším zájmem, jděte na to.

Raphaël

Raphaël, na rozdíl od funkce Snap, je kompatibilní se staršími prohlížeči. Ve skutečnosti může pracovat s IE6 +, Safari 3+ a Chrome 5+. Pokud vyvíjíte něco pro podnikový systém, kde by mohli být uživatelé na starších strojích, může být Raphaël nejlepší.

jQuery SVG

Stejně jako SVG a jQuery? Nejsem překvapen. jQuery pravděpodobně ztratil část pozornosti, kterou kdysi věnoval pozornost, ale pro mnohé z nás je stále knihovnou.

jQuery SVG, pak je pravděpodobně plugin, který hledáte. Má funkce pro animace, grafy a dokonce i rozšíření. To je správné, rozšíření pro plugin. Podpora prohlížeče je IE9 +, ale starší verze IE mohou být použity s příslušnými nainstalovanými pluginy prohlížeče.

Nezáleželo by na tom, že uživatelé mají tyto pluginy.

SVGMagic

SVGMagic je řešení založené na jQuery pro starší prohlížeče (IE 7 a 8). Namísto manuálního vytváření záložních obrázků pro každý SVG soubor, který používáte, může tento plugin generovat je za běhu. To také zpracovává obrázky na pozadí.

Jak to dělá? Detekuje, zda uživatelský prohlížeč zvládne SVG. Pokud ano, jde spát. Pokud ne, spojí se s PHP skriptem na straně serveru a řekne mu, že vytvoří soubor PNG příslušných obrázků SVG s potřebnými rozměry.

Po dokončení skript PHP odesílá adresy URL na tyto dočasné záložní obrázky zpět do pluginu jQuery a nahrazují se výchozí adresy URL. To samozřejmě trvá určitý čas, takže můžete volitelně určit obrázek zástupného symbolu, který se zobrazí při převodu.

Jedna výstraha: momentálně to nemůže zvládnout příliš mnoho obrázků najednou. Tuto techniku ​​byste nechtěli používat na stránkách s více než několika soubory SVG.

SVG.JS

A konečně, zde je možnost pro byte-counters. SVG.JS váží pouze 11,8kbs při gzipped. I přes svou malou velikost podporuje řadu funkcí (jak je uvedeno na stránce projektu):

• Animace o velikosti, pozici, transformacích, barvě
• Bezbolestné rozšíření díky modulární struktuře
• K dispozici jsou různé užitečné pluginy
• Unifikované api mezi typy tvarů s pohybem, velikostí, středem
• Vazby událostí na prvky
• Plná podpora optických masek a ořezových cest
• Textové cesty, dokonce animované
• Skupiny a sady prvků
• Dynamické přechody

Číst dokumentace pro více informací.

Sklad SVG

Ne každý je ilustrátor. Přinejmenším jsem určitě nikdy nebyl dobrý v tom. Takto se ilustrační zásoby stávají neocenitelným zdrojem. To může být těžké najít dobré věci, ačkoli. To, co nevypadá, že klipart Microsoft je často omezen, nebo drahý.

Neztrácejte však naději. Tam je spousta věcí, které jsou dobré kvality. Pokud to zcela neodpovídá vašim potřebám, je to vektorové umění. Je pravděpodobné, že může být vyladěn tak, aby vyhovoval vašim potřebám, pokud máte základní znalosti o vektorové grafické aplikaci.

SVG však může udělat víc než jen ilustraci. Můžete také vytvářet vzory, velké fantazijní pozadí, které netříží šířku pásma a další. Podívejme se na to, co lidé udělali pro nás ostatní:

SVG Clipart na openclipart.com

SVG, jako otevřený formát, má mnoho nadšenců s otevřeným zdrojovým kódem jako fanouškům. Jako výsledek je to jeden z primárních formátů používaných v tom, co by mohlo být největší sbírka bezplatných klipartů tam venku.

A hodně z toho je kliparty. A hodně z toho je amatérská práce. Existuje však nějaká kvalitní grafika, pokud se podíváte. Hej, je to zdarma.

SVG Stock

SVG Stock je malé místo s relativně malou, ale vynikající sbírkou. Jsou to převážně ikony a zařízení mockups, ale všechny jsou vysoce kvalitní. Pokud potřebujete jednu z těchto dvou věcí, začněte tady.

Zdroje SVG na stránkách deviantart.com

Ach DeviantArt, tato obří komunita stále ještě silná. Přejděte do kategorie obrázků a vyhledejte SVG (nebo klikněte na odkaz výše). Kvalita se bude opět lišit, ale tam jsou dobré věci, pokud máte čas podívat se.

SVG Galerie vzorů

Malá galerie plná SVG založené vzory. Je navržen jako vícenásobný, ale zdrojové soubory jsou k dispozici pro vaše pohodlí.

SVG vzory od svgeneration.com

svgeneration.com obsahuje mnoho SVG vzorků pro vaše použití. Stránky obsahují možnosti úprav pro každý vzorek a kód můžete upravit přímo na webu a zobrazit změny v akci. Nejen, že je to skvělý zdroj pro předem připravené vzory, ale můžete se dozvědět hodně o tom, jak jsou vyrobeny na prvním místě.

SVG Clipart

Umění na tato stránka je zřetelně staromódní kreslený styl. To, že upřímně řečeno, nebude to, co všichni hledají, ale je tu pro ty, kteří chtějí, aby klasika cítila jejich ilustrace.

SVG Studio

SVG Studio nabízí tisíce ilustrací s výrazně moderním pocitem. Můžete je zakoupit v malých podsestavech nebo si stáhnout celý katalog najednou. To vám vrátí 500 USD, což za 3000 ilustrací není tak špatná dohoda.

SVG na velkých skladech

Nemohu říkat moc o umění nabízené na každém místě, protože se velmi liší od přispěvatele bez celkového stylu. Největší jména jsou istockphoto.com,shutterstock.com,bigstockphoto.com, a canstockphoto.com.

SVG Inspirace

Můžeme si přečíst všechny úvody, které chceme, a sledovat všechny výukové programy. Můžeme se stát experty v každém aspektu specifikace SVG a přesto bychom mohli být nadále neuvěřitelně nudný. Musíme se podívat na veškerý potenciál v jakékoliv dané technologii, abychom toho nejvíce využili.

To je často snadnější řečeno než udělat. Často to pomáhá mít referenční bod, něco úžasného na pohled, a ukáže nám přesně, jaké úžasné věci můžeme udělat s tím, co máme. To jsou stránky, které se vám líbí Webcreme pro web design obecně. To je to CSS Zen Garden, a všechny CSS galerie, které přišly za ním, byly pro rozvržení CSS.

Zatím jsem nenalezl žádné galerijní stránky věnované tomu, co lze provést pomocí SVG v kombinaci s jinými webovými technologiemi, a to by mohlo pomoci. Mezitím je zde ukázka úžasných věcí, které jsme našli:

Uchopte grafickou reklamu

Tento příklad je součástí Snap.svg kolekce na CodePen. Potřebujete dokonalý příklad toho, jak může být SVG použita k revoluci reklam online? To je ono.

Přemýšlejte o tom: některé reklamní společnosti stále prodávají reklamy založené na velikosti pixelů. To nemá žádný smysl ve věku nekonečných variací velikosti obrazovky a sítí Retina k zavádění. Dokud nebudeme přicházet s lepším systémem než vizuálními reklamami, SVG by nám přinejmenším pomohlo, abychom reklamy začlenili do reaktivního charakteru webového designu.

Viz pero Uchopte grafickou reklamu od CJ Gammon ( @cjgammon ) na CodePen .

Jtop desktop rozhraní

Mozilla Developer Network, entita, do níž se budu věnovat i ve výzkumu webových technologií obecně, také produkovala některé zajímavé věci se SVG. Například, šli a udělali celé pracovní plochy založené výhradně na webových technologiích, jako jsou HTML5, JS, SVG a CSS. Je to rychlé, přizpůsobitelné a skoro si přeji, aby byl součástí skutečného operačního systému.

Čas reflexe

Přinesl nám ShinyDemos (které nám na druhou stranu přináší lidé na Opera ). Čas reflexe bude doslova překrývat hodiny přes živý zdroj z vaší webové kamery. No, pokud jí udělíte svolení, a vlastně máte kameru. Hlavním důvodem je, že ukazuje, jak mohou být masky SVG překryty téměř na všechno.

oblurlay

Prostřednictvím kombinace CSS, SVG a jQuery, oblurlay vytváří přesně to, co naznačuje jeho název: rozostřený překryv, styl iOS. Je to plugin jQuery, takže implementace není obtížná a přehledně ukazuje, jak lze filtry SVG aplikovat na všechny druhy věcí, nejen samotné objekty SVG.

Demonstrace kódů

Codrops (dříve zmíněná v sekci tutoriálů) vytvořila spoustu fascinujících, impozantních a prostě hezkých dem, aby ukázala, co SVG může dělat. Každý si v tomto článku zaslouží vlastní vlastní sekci, ale je tu tolik, že je všechno dávám do jednoho. Pokud se na tuto sekci "Inspirace" nedíváte na nic jiného, ​​podívej se na ně. Podívejte se na ukázky a stáhněte si zdrojové soubory. Pak jdi poďakovat chlapům v Codrops. Oni si to zaslouží.

Poznámka: ne všechny jsou SVG-zaměřené, ale všechny používají grafiku SVG nějakým způsobem.

Efekty načítání stránky : sada kreativních efektů načítání stránky, které používají animace SVG se Snap.svg. Cílem je ukázat překryvnou vrstvu se zajímavou animací tvaru při načítání nového obsahu.

Myšlenky na jemné efekty hoveru : nějaká kreativní a jemná inspirace vznášedla pomocí moderních CSS technik včetně 3D překladu a pseudo elementů. Používají také SVG. Přejděte na stránku demo pro druhou sadu účinků.

SVG kreslení animace : malý experiment, který zkoumá použití animací výkresů SVG, aby předcházeli vzhledu grafiky nebo prvků webových stránek, které simulují jejich načítání.

Off-Canvas Menu Effects : inspirace pro efekty a styly nabídky mimo plátno pomocí CSS přechodů a animací SVG.

Inspirace stylů nápovědy : malá sbírka různých stylů a efektů vzhledu myšlenek pro vaši inspiraci. Pomocí transformátorů CSS, tvaru okraje a SVG můžeme vytvářet moderní pohledné a zajímavé popisky.

Intimní styly upozornění : některé jednoduché nápady a efekty pro nenápadné oznámení na webových stránkách. Používá se malý skript pro prezentaci některých stylů a pro efekty se používají animace CSS.

Inspirace pro prvky vlastní volby : nějaká inspirace pro styling vlastní verze prvku select. Existuje mnoho možností a dnes zkoumáme některé nápady, jak nechat uživatele vybrat stylově.

Inspirace pro inline kotevní styly : inspirace pro tvůrčí a moderní inline kotevní styly a efekty vznášení pomocí různých technik, jako jsou pseudo-elementové přechody a SVG.

Šipkové navigační styly : inspirace pro styly navigace se šipkami a efekty vznášení pomocí ikon SVG pro šipky a přechody CSS a animace efektů.

Wobbly Slideshow Effect : snímky v této prezentaci se při pohybu pohybují. Efekt je založen na snímku Dribbble od Sergey Valiukh a byl vytvořen pomocí Snap.svg a morphingových cest SVG ... Vezměte prosím na vědomí, že je to velmi experimentální a testováno pouze v nejnovějších verzích moderních prohlížečů.

Obal ji

SVG, přestože ještě není jedním z nejvíce používaných obrazových formátů, je dobře zdokumentován, silně podporován a je velkou součástí budoucnosti internetu. Pokud ji ještě nepoužíváte jako součást procesu návrhu, je pravděpodobně čas začít.

Doporučený obrázek, bezproblémový vektorový obrázek přes Shutterstock.

• ← 10 zdarma WordPress Plugins pro únor 2015
• 21 Nástroje spolupráce pro zjednodušení vaší týmové práce →