De ultieme gids voor SVG

Stel je voor dat je een afbeelding in een webpagina kunt insluiten, die pagina naar elke grootte kunt schalen en nooit de beeldkwaliteit verliest. Nou, dat kan. Het is helemaal mogelijk, we hebben het gewoon niet zo vaak gedaan als zou moeten.

Afbeeldingen met vaste formaten zoals JPG-bestanden, GIF's en PNG's hebben hun plaats op het web, maar hun inherent statische aard is in strijd met de manier waarop het web wordt gebruikt. Naarmate we reageren op responsieve, vloeiende ontwerpen, wordt het irritant dat het te maken krijgt met afbeeldingen die in principe niet reageren. Het is frustrerend als ik me realiseer dat het de beste methode is om verschillende versies van elke afbeelding op uw site te maken en te gebruiken.

Ik realiseer me dat hier goede, technische redenen voor zijn. Het zal een lange tijd duren voordat iemand bijvoorbeeld een oneindig schalingsfoto maakt. Foto's zijn echter niet het enige en het allerbeste van beelden. Vectorafbeeldingen zijn erg ver gekomen. Ze gaan nog een lange weg.

Ze kunnen moeilijker te verkrijgen zijn, omdat niet elke webontwerper een illustrator is. Foto's zijn er in overvloed en goede beeldmateriaal is gemakkelijk te vinden. Vectorafbeeldingen zijn daarentegen vaak van lage kwaliteit, of misschien vindt u gewoon niet de juiste. Het inhuren van illustratoren is duur.

Maar naarmate de ondersteuning voor vectorafbeeldingen online groeit, zal ook hun gebruik toenemen. Het is tijd dat iedereen leert ze te implementeren op hun websites en ze op een creatieve manier te gebruiken. Beelden reageren zo snel als onze websites de toekomst hebben.

Maak kennis met het SVG-bestand ...

Wat is SVG en waarom zou u het gebruiken?

Oke, voor de nieuwkomers onder ons staat SVG voor Scalable Vector Graphics. SVG-bestanden zijn vrij eenvoudige dingen, in theorie. Het zijn gewoon tekstbestanden met een stapel XML erin. Elk stukje visuele informatie in een SVG-bestand wordt gedefinieerd door een voor mensen leesbare code, die vervolgens wordt berekend en weergegeven door uw browser, grafische software, enz.

Dit betekent dat hoewel SVG-bestanden niet zo complex zijn als bijvoorbeeld een foto die is geformatteerd als een JPG, ze oneindig veel flexibeler zijn. Ze kunnen handmatig worden gewijzigd in een teksteditor. Ze kunnen worden gewijzigd door code, zoals JavaScript en CSS. Ze kunnen worden gecomprimeerd tot bijna belachelijk kleine maten.

Met andere woorden, ze zijn specifiek ontworpen om naast andere webtechnologieën te worden gebruikt. Ze zijn perfect voor ons.

Eind jaren 90 introduceerden Macromedia en Microsoft (en andere bedrijven) VML , en toen presenteerde Adobe (en andere bedrijven) PGML als mogelijke oplossingen voor vectorafbeeldingen op websites naar het W3C (en mogelijk als alternatief voor het oude PostScript-formaat). De W3C zei: "Nee, we gaan ons eigen ding doen; maar bedankt voor de ideeën! "Het resultaat was de SVG-werkgroep.

In september 2001 werd SVG 1.0 een officiële W3C-aanbeveling en de rest is geschiedenis. Soort van. Internet Explorer bleef achter bij het aannemen van het SVG-formaat en verbaasde niemand. Sindsdien zijn er updates gericht op mobiele apparaten en meer met verduidelijkingen.

Zelfs nu maakt de SVG-werkgroep SVG 2, die meer integratie-integratie zal omvatten met zaken als HTML5, CSS en de WOFF-lettertype-indeling.

Het heeft ondersteuning

De enige versie van Internet Explorer waar je je nu zorgen over moet maken, is IE8. Dat is het. Alle anderen hebben min of meer volledige SVG-ondersteuning. Ja, je kunt af en toe bugs tegenkomen, zelfs in de "goede" browsers, maar het is nog steeds de moeite waard. Niet alleen zal het werken om hen heen je probleemoplossende vaardigheden scherp houden, maar hoe meer we deze technologie gebruiken, hoe meer browserontwikkelaars dit zullen ondersteunen.

Uitchecken caniuse.com voor een meer diepgaande analyse van wat werkt en wat niet in welke browsers.

Alles reageert ... of zou moeten zijn

Internettechnologie is veel verder gegaan dan de statische websites die we vroeger kenden. Het is tijd voor onze afbeeldingen om in te halen, eenvoudig en duidelijk. Gebruik SVG als u een pictogram moet maken. Wanneer je een illustratie moet gebruiken, ga dan voor SVG als je kunt. Gebruik SVG als u een abstracte maar toch eenvoudige website-achtergrond wilt.

Ik ben geen fan van de technologie van het netvliesscherm, vooral omdat ik er geen heb. Het is geen jaloezie. Nou ja, het is niet alleen jaloezie. Het simpele feit is dat de Retina-schermen verdwenen zijn en het maken van beelden veel gecompliceerder hebben gemaakt. SVG, dat oneindig schaalbaar is, kan het probleem helpen minimaliseren.

Toegankelijkheid

Gebruikers met een visuele beperking surfen over het algemeen op internet met alles wat een beetje ingezoomd is. Wanneer gewone afbeeldingen worden ingezoomd, verliezen ze kwaliteit. SVG zal dat niet doen, dus waarom zou u er niet van profiteren om slechtzienden een kwaliteitsbeleving te geven?

Het kan helpen om uw website toekomstbestendig te maken

Technologie is altijd aan het veranderen. Wat hier vandaag is, kan al een tijdje weg zijn, maar SVG zal hoogstwaarschijnlijk nog een tijdje in de buurt zijn. Zolang het W3C de wereldwijde industriestandaarden bepaalt, lijkt het erop dat SVG de de-facto standaard blijft voor vectorafbeeldingen in de browser. Gebruik het nu, en uw websites zijn ingesteld voor een goede, lange tijd.

SVG-zelfstudies en -handleidingen

Dus je bent overtuigd. SVG is cool, het is de toekomst, het is tijd om het te leren. Gelukkig voor iedereen is dit het internet. U weet gewoon dat mensen kostbare uren besteed hebben aan het maken van gratis trainingsmateriaal voor iedereen die het wil. Mensen die dat soort dingen doen, zijn de mensen die het internet geweldig maken.

Daarna gingen we natuurlijk uren kijken door de verschillende tutorials om de besten te vinden die er zijn. Je kunt ons later bedanken. Voorlopig moet er nog worden gelezen!

Opmerking: Onthoud dat SVG-bestanden allemaal XML-code zijn, dus veel van deze handleidingen zijn gericht op ontwikkelaars of bevatten gewoon veel code. We hebben beide zelfstudies met de basisbeginselen en specifieke, creatieve toepassingen voor SVG opgenomen, dus sla dit gedeelte niet over.

• SVG gebruiken: Chris Coyier schrijft al jaren gemakkelijk begrijpbare CSS- en HTML-zelfstudies op css-tricks.com. Zijn primer op SVG is niet anders. Ik zal links opnemen naar veel basisverklaringen en tutorials, maar dit is waar ik zou beginnen. Deze tutorial bevat basisinstructies voor gebruikers van Adobe Illustrator.
• Hoe te beginnen met SVG: Ik zou nalatig zijn als ik niet had opgenomen WDD's eigen bijdrage naar SVG-onderwijs. De altijd fantastische Sara Vieira omvat het maken van je afbeeldingen, het exporteren ervan, het opruimen van de code, het verplaatsen van presentatiekenmerken naar CSS-bestanden en meer.
• Resolutie Onafhankelijkheid met SVG: als het webgerelateerd is, heeft Smashing Magazine waarschijnlijk een artikel hierover. Ze bestrijken de basisprincipes van het SVG-formaat met hun gebruikelijke stijl en aandacht voor detail.
• Schaalbare vectorafbeeldingen (een reeks artikelen): Hongkiat.com is een andere bron voor kwalitatief webgerelateerd en grafisch gerelateerd leren. In plaats van slechts één lang artikel te publiceren, hebben ze gepubliceerd een hele reeks van hen door Thoriq Firdaus. Het Engels is soms een beetje tekort, maar de instructies zijn nog steeds duidelijk en gemakkelijk te begrijpen.
• Sara Soueidan: Styling en animaties Scalable Vector Graphics met CSS: dit is een video van een presentatie gegeven op CSSconf EU 2014. Hierin geeft Sara Soueidan een aantal tips, trucs en zelfs een paar hacks voor het toepassen van stijlen en animaties op SVG op het web. Het is een halfuur lang, dus kom comfortabel en houd iets om aantekeningen te maken met de hand. Het is je tijd helemaal waard.
• SVG exporteren voor het web met Adobe Illustrator CC: Adobe Illustrator-gebruikers zouden dit moeten doen kijk hier eens naar. Een van de eigen blogs van Adobe geeft gedetailleerde en ik bedoel zeer gedetailleerde instructies over het exporteren van SVG-bestanden naar het web. Leer hoe u deze kunt optimaliseren tot de kleinste bestandsgrootte voor internet.
• SVGBasics: dit hele website is toegewijd om mensen te leren hoe ze vanuit XML XML-afbeeldingen kunnen maken. Ik raad dit aan voor wie het heeft over de daadwerkelijke back-end - of zelfs aan de voorkant - van een website. Weten hoe de code werkt, kan een lange weg helpen om problemen op te lossen.
• SVG-zelfstudie door Jakob Jenkov: een andere ontwikkelaar centraal reeks tutorials, hier. Het grote verschil? De auteur heeft videoversies van elke sectie opgenomen. Als je beter leert door zowel beeldmateriaal als audio bij je lessen te voegen, is dit een goede plek om te beginnen.
• De eenvoudige intro tot SVG-animatie: de titel zegt het al. David Walsh legt uit hoe je je kunt instellen SVG-elementen voor animatie, welke attributen te gebruiken voor verschillende elementen, welke bibliotheken te gebruiken, en meer. Het is geen volledige gids, maar het zal je kennis laten maken met de basisbegrippen die nodig zijn om te beginnen met animeren.
• Een inleiding tot SVG-animatie: Deze tutorial gaat in wat meer detail over hoe je je SVG-objecten kunt animeren. Bovendien behandelt het een aantal veelvoorkomende problemen die je tegen kunt komen tijdens het animeren, dus het is het lezen waard.
• Hoe kan ik: meerdere pictogrammen exporteren naar SVG-bestanden vanuit Adobe Illustrator: een set SVG-pictogrammen maken in Illustrator? Houden ze allemaal in één Illustrator-bestand? Exporteer ze allemaal naar hun afzonderlijke bestanden in een enkele klik.
• Animate-tekst met SVG-paden: doet precies wat het zegt in de titel. Zet je animatie op, misschien gebruik het op een logo. Het zeker ziet er cool genoeg uit ...
• Anime SVG-pictogrammen met CSS3 en JavaScript: een van de grootste toepassingen van SVG is voor pictogrammen, en terecht. Maak één bestand, gebruik het overal in uw site of app, op elke grootte. Wat kan je nog meer vragen? Deze tutorial laat zien hoe je die iconen kunt animeren tijdens het zweven.
• Een schaalbare SVG-infographic maken: Infographics is een van de favoriete manieren waarop internet tegenwoordig feiten gebruikt. Waarom niet maak ze oneindig schaalbaar? Gooi wat animatie in en je kunt heel goed een paar hersens neerslaan.
• Een SVG HTML Burger Button maken: Zeg wat je wilt over de hamburgerknoop, het gaat waarschijnlijk nergens heen. Jij mag net zo goed gebruik SVG en animatie om het de slimste, coolste hamburgerknop te maken die je maar kunt. Deze bespreekt hoe je paden en streken kunt animeren om van de ene knop letterlijk een andere te maken, dus probeer het eens.
• Snap.svg Voorbeelden en zelfstudies: Dit is een gids om de Snap.svg JavaScript-bibliotheek te gebruiken (zie het gedeelte "Tools" hieronder) hieronder. Het is ontworpen om u te helpen aan de slag met het maken van SVG-elementen in JS, en deze te animeren, interactief te maken, enzovoort.
• Inleiding tot Raphaël.js: Raphaël.js is een van de grote SVG-gerelateerde JavaScript-bibliotheken die er zijn, en Dit artikel leert je hoe je het moet gebruiken. (Zie nogmaals het gedeelte Hulpmiddelen hieronder.)
• Geanimeerd SVG-pictogram: Mensen lijken veel geanimeerde pictogrammen leuk te vinden, dus je kunt net zo goed elke benadering leren om ze te maken zoals je kunt. Hier we zien de Snap.svg-bibliotheek opnieuw in actie, omdat de auteur een afspeelknop van een mediaspeler maakt en vervolgens animeert.
• Clipping in CSS en SVG - Het clippad Eigenschap en element: hier is een leuk lang artikel over het gebruik van SVG-clipping om afbeeldingen in vormen te maken en afbeeldingen in enorme tekst. U zou kunnen overwegen om het te gebruiken om grote fancy headlines te maken die SEO-vriendelijk zijn, omdat bots van zoekmachines ze kunnen lezen.
• SVG's responsief maken met CSS: hoewel SVG-bestanden oneindig schaalbaar zijn, kunnen de methoden die worden gebruikt om ze in een webpagina te plaatsen soms problemen veroorzaken. Deze tutorial van codrops legt uit hoe u de verschillende problemen die u tegen kunt komen kunt oplossen.
• Shape Hover-effect met SVG: Creëer een soepel en stijlvol uiterlijk geanimeerd zweefeffect voor afbeeldingsvoorbeelden. ( Bekijk de demo. )
• Een SVG-primer voor browsers van vandaag van de W3C: niet helemaal de laatste, en zeker niet de minste, die we hebben een bron door de mensen die in de eerste plaats met het hele SVG-formaat kwamen: de W3C. Het is geen eenvoudige tutorial of een introductie. Volgens het voorwoord is het gemaakt voor professionele programmeurs, grafisch ontwerpers met "een sterke technische neiging", en anderen die het niet erg vinden om tot de kern te komen.
• SVG-zelfstudie door MDN: net als bij SVGBasics is dit een eerder uitgebreide reeks tutorials, geleverd door het Mozilla Developer Network. Hoewel het uitgebreid is, wordt de zelfstudie echter beschouwd als "in ontwikkeling". Dit is bijvoorbeeld momenteel te zien op de pagina "Filters", die leeg is. Volgens de pagina zelf bevindt de tutorial zich in een vroeg stadium van ontwikkeling. Als je in staat bent, help dan alsjeblieft door een paar alinea's in te knippen en te schrijven. Extra punten voor het schrijven van een hele pagina.

SVG-hulpmiddelen

Een van de vele voordelen van het open karakter van SVG is dat iedereen er software voor kan maken. Er zijn geen licentierestricties of kosten om te betalen, slechts een open standaard voor mensen om te gebruiken. Zoals je zou verwachten, hebben veel ontwikkelaars precies dat gedaan.

Hulpmiddelen voor het maken en gebruiken van het SVG-formaat zijn er genoeg. Ze variëren van grote softwarepakketten die de optie bevatten om SVG als een soort nabeschouwing te exporteren naar vectortekeningapps die SVG als hun primaire indeling gebruiken, en meer.

Een snelle Google-zoekopdracht voor "SVG-tools" levert "Ongeveer 37.000.000 resultaten" op, dus u weet dat er veel is.

Waar dan, zou je moeten beginnen?

Premium toepassingen

De grote namen in het maken van afbeeldingen ondersteunen allemaal SVG. Adobe Illustrator,Corel Draw, zelfs verschillende producten van Xara - ja, Xara is nog steeds een ding - ze kunnen allemaal bestanden in het formaat importeren, bewerken en opslaan. (Van Illustrator is bekend dat het een aantal vreemde dingen in SVG-bestanden plaatst, dus je moet voorzichtig zijn met de exportinstellingen.)

Inkscape

Als u nog geen vectorafbeeldingenpakket gebruikt, Inkscape is een fantastische plek om te beginnen. Inkscape werd in 2003 opgericht als een vork van een ander open source project genaamd Sodipodi (dat gebaseerd was op nog een ander OSS-project) en is de standaard geworden voor gratis, platformonafhankelijke vector grafische software. Het is niet zo gevuld met functies als Adobe Illustrator, maar het is meer dan genoeg voor de meeste vectorprojecten.

Serif DrawPlus Starter Edition

serif is een bedrijf dat behoorlijk goede grafische creatie en desktop publishing software maakt. Al hun hoofdsoftware wordt geleverd met gratis "Starter Editions" en hun vectortekening-app is hierop geen uitzondering.

Laat de bit "Starter Edition" u echter niet voor de gek houden. Het heeft misschien niet alles wat de pro-versie doet, maar het kan in de meeste gevallen de klus klaren. Tenzij u een illustrator van beroep bent, kan en zal deze app aan uw behoeften voldoen ... op voorwaarde dat u zich op Windows bevindt. Helaas is dit geen platformoverschrijdend platform. Ook is registratie vereist voor de download.

Karbon

Een deel van de Calligra-kantoorsuite, die voornamelijk voor Linux is, Karbon is een volledig uitgeruste vector grafische editor. Het heeft alle basishulpmiddelen en een paar dingen naast. Installatie op Mac en Windows is momenteel moeilijk, maar niet onmogelijk.

Print ontwerp

De naam klinkt als een softwarepakket uit de jaren 90, ik weet het, maar het is eigenlijk vrij nieuw. In feite is het de opvolger van de oude sK1-illustratie-app die is stopgezet. Print ontwerp bevindt zich momenteel in de "preview" -fase en heeft zowel Linux- als Windows-versies. Het is nog niet klaar voor gebruik in de productie, maar het is een project dat het bekijken waard is.

SVG-bewerking

De naam is misschien een beetje on-the-nose, maar de software is meer dan capabel. SVG-bewerking Is volledig gebaseerd op webtechnologieën, met name HTML5, JavaScript en CSS. Dit betekent dat er geen functionaliteit aan de serverzijde is. Bovendien is het Open Source, wat betekent dat u het kunt downloaden, op uw eigen server kunt zetten of zelfs vanaf de desktop kunt gebruiken.

Het heeft een lijst met functies lang genoeg om veel een desktop-app jaloers te maken en sneller werkt dan de meeste, dus probeer het eens.

Janvas

Janvas is de enige webgebaseerde app in deze lijst die niet strikt gratis is. Er is een proefperiode van dertig dagen, waarna een abonnement 26 euro per jaar kost. Als geen van de andere webgebaseerde SVG-editors u gelukkig maken, kunt u dit echter overwegen.

De tekenhulpmiddelen zijn geavanceerd en vertrouwd genoeg, elke variabele kan worden bewerkt in de zijbalk en u kunt uw documenten opslaan in Google Drive. U kunt sjablonen maken, samenwerken aan tekendocumenten en zelfs CSS- en JS-bestanden opnemen die zijn gemaakt om te communiceren met de afbeeldingen.

Al met al is het een solide aanbod.

Mondrian

Klein. Sleek. Eenvoudig. Mondrian is nog een andere open source aanbieden, en het is een stuk kleiner dan de meeste. Het heeft zelfs geen teksttool ... maar het maakt eenvoudige tekeningen heel goed. U kunt bestanden van de harde schijf of een URL openen, insluitcode voor uw website halen of uw tekening opslaan als SVG of PNG. Het is misschien niet zo geavanceerd als andere apps, maar het voelt gewoon prettig om te gebruiken, en de pen-tool voelt natuurlijk aan.

Teken SVG

Teken SVG is een andere webgebaseerde SVG-editor met alle functies die u ooit nodig zou kunnen hebben. Het sterkste punt lijkt de pure snelheid te zijn waarmee het dingen laadt en tekent. Jammer genoeg heeft de gebruikersinterface ernstige tekortkomingen. Toch is het er en werkt het, mocht je het ooit nodig hebben.

SVG-bibliotheken

Ontwikkelaars verheugen zich! We hebben hier ook enkele links voor jou. Immers, SVG is niet zomaar een ander grafisch formaat. Het is code. Het is code die kan worden gekoppeld aan, of ingesloten. Het kan worden interactief met en direct gewijzigd. Met wiskunde!

Snap.svg

breuk is een JS-bibliotheek voor het genereren van en interactie met SVG. Het is ontworpen voor moderne browsers. Yup, dat betekent dat het alleen IE9 + ondersteunt ... maar als oudere browsers niet jouw zorg zijn, ga ervoor.

Raphaël

Raphaël in tegenstelling tot Snap, is compatibel met oudere browsers. Het kan zelfs werken met IE6 +, Safari 3+ en Chrome 5+. Als u iets aan het ontwikkelen bent voor een enterprise-systeem waarbij gebruikers zich bijvoorbeeld op oudere machines bevinden, is Raphaël wellicht de beste keuze.

jQuery SVG

Zoals SVG en jQuery? Ik ben niet echt verrast. jQuery heeft misschien een deel van de aandacht in de schijnwerpers verloren die het ooit had, maar het is nog steeds een go-to-bibliotheek voor velen van ons.

jQuery SVG, dan is het misschien de plug-in die je zoekt. Het heeft functies voor animaties, het maken van grafieken en zelfs extensies. Dat klopt, uitbreidingen voor een plug-in. Browserondersteuning is IE9 +, maar oudere versies van IE kunnen worden gebruikt met de juiste browser-plug-ins geïnstalleerd.

Ik zou echter niet afhankelijk zijn van gebruikers met die plug-ins.

SVGMagic

SVGMagic is een drop-in, jQuery-gebaseerde, oplossing voor oudere browsers (IE 7 & 8). In plaats van handmatig back-upafbeeldingen te maken voor elk SVG-bestand dat u gebruikt, kan deze plug-in ze on-the-fly genereren. Het verwerkt achtergrondafbeeldingen ook prima.

Hoe doet het dit? Het detecteert of de browser van de gebruiker SVG aankan. Als dat zo is, gaat het in slaap vallen. Als dat niet het geval is, neemt het contact op met een PHP-script op de server en vertelt het dat het een PNG-bestand van de betreffende SVG-afbeeldingen met de vereiste dimensies moet maken.

Als het script is voltooid, stuurt het PHP-script de URL's naar deze tijdelijke reserveafbeeldingen terug naar de jQuery-plug-in en worden de standaard-URL's vervangen. Dit kost uiteraard tijd, dus u kunt optioneel een tijdelijke afbeelding opgeven die moet worden weergegeven terwijl de conversie plaatsvindt.

Een waarschuwing: op dit moment kan het niet teveel afbeeldingen tegelijkertijd verwerken. U zou deze techniek niet willen gebruiken op pagina's met meer dan een paar SVG-bestanden.

SVG.JS

Ten slotte is hier een optie voor de byte-tellers. SVG.JS weegt slechts 11.8Kbs wanneer gzipped. Ondanks zijn kleine formaat ondersteunt het een indrukwekkend aantal functies (zoals vermeld op de projectpagina):

• Animaties op grootte, positie, transformaties, kleur
• Pijnloos uitschuiven dankzij de modulaire structuur
• Diverse handige plug-ins beschikbaar
• Uniforme api tussen vormtypen met verplaatsing, grootte, midden
• Evenementen binden aan elementen
• Volledige ondersteuning voor dekkingsmaskers en uitknippaden
• Tekstpaden, zelfs geanimeerd
• Elementgroepen en sets
• Dynamische gradiënten

Lees de documentatie voor meer informatie.

Voorraad SVG

Niet iedereen is een illustrator. Tenminste, ik ben er zeker nooit goed in geweest. Voorraadillustraties worden dus een onmisbare hulpbron. Het kan echter moeilijk zijn om goede dingen te vinden. Wat er niet uitziet als Microsoft clipart is vaak beperkt in omvang of duur.

Verlies echter geen hoop. Er zijn veel dingen die van goede kwaliteit zijn. Als het niet perfect aan je behoeften voldoet, dan is het vectorkunst. De kans is groot dat het kan worden aangepast aan uw behoeften als u over een basiskennis van vectorafbeeldingen beschikt.

SVG kan echter meer doen dan alleen voorraadillustraties. Je kunt ook patronen maken, grote mooie achtergronden die geen bandbreedte opeten, en meer. Laten we eens kijken naar wat mensen hebben gemaakt voor de rest van ons:

SVG Clipart op openclipart.com

SVG heeft als open format veel open source-enthousiasten als fans. Als gevolg hiervan is het een van de belangrijkste formaten die worden gebruikt in wat zou kunnen zijn de grootste verzameling gratis illustraties buiten.

En veel ervan is clipart-achtig. En veel van het is amateurwerk. Er zijn echter een aantal kwaliteitsafbeeldingen, als je kijkt. Hé, het is gratis.

SVG-voorraad

SVG-voorraad is een kleine site, met een relatief kleine, maar uitstekende collectie. Het zijn meestal pictogrammen en apparaatmodellen, maar ze zijn allemaal van hoge kwaliteit. Als je een van deze twee dingen nodig hebt, kun je hier beginnen.

SVG-bronnen op deviantart.com

Ah DeviantArt, die gigantische gemeenschap gaat nog steeds sterk. Ga naar de stock afbeeldingen categorie en zoek naar SVG (of klik op de link hierboven). Nogmaals, de kwaliteit zal variëren, maar er zijn goede dingen als je de tijd hebt om te kijken.

SVG-patronengalerie

Een kleine galerij vol met SVG-gebaseerde patronen. Het is ontworpen als meer een showcase, maar de bronbestanden zijn er allemaal voor uw gemak.

SVG-patronen van svgeneration.com

svgeneration.com bevat veel SVG-patronen voor uw gebruik. De site bevat bewerkingsopties voor elk patroon en u kunt de code rechtstreeks op de site bewerken om uw wijzigingen in actie te zien. Dit is niet alleen een geweldige bron voor vooraf gemaakte patronen, maar u kunt ook veel te weten komen over hoe ze in de eerste plaats zijn gemaakt.

SVG Clipart

De kunst aan deze site is duidelijk ouderwetse cartoonstijl. Het is, eerlijk gezegd, niet waar iedereen naar op zoek is, maar het is er voor degenen die dat klassieke gevoel bij hun illustraties willen hebben.

SVG Studio

SVG Studio biedt duizenden illustraties met een uitgesproken moderne uitstraling. Je kunt ze in kleine subset kopen of de hele catalogus in één keer downloaden. Dat levert 500 USD op, wat voor 3000 illustraties geen slechte deal is.

SVG op de grotere stocksites

Ik kan niet veel zeggen over de kunst die op elke site wordt aangeboden, omdat deze sterk varieert door de bijdrager zonder algehele stijl. De grootste namen zijn istockphoto.com,shutterstock.com,bigstockphoto.com, en canstockphoto.com.

SVG-inspiratie

We kunnen alle inleidingen lezen die we willen en alle tutorials die er zijn volgen. We kunnen experts worden in elk aspect van de SVG-specificatie, en toch zijn we er misschien nog steeds ongelooflijk saai over. We moeten kijken naar alle mogelijkheden van elke technologie om er het meeste gebruik van te maken.

Dat is echter vaak makkelijker gezegd dan gedaan. Het helpt vaak om een ​​referentiepunt te hebben, iets geweldigs om naar te kijken en ons precies te laten zien wat voor geweldige dingen we kunnen doen met wat we hebben. Dat is wat sites leuk vinden Webcreme deed voor webontwerp in het algemeen. Dat is wat CSS Zen Garden, en alle CSS-galerijen die erachter kwamen, deden voor CSS-lay-outs.

Tot nu toe heb ik geen galerijwebsites gevonden die gewijd zijn aan wat kan worden bereikt via SVG in combinatie met andere webtechnologieën, en dat zou kunnen helpen. In de tussentijd is hier een showcase van geweldige dingen die we hebben gevonden:

Snap display-advertentie

Dit voorbeeld maakt deel uit van de Snap.svg verzameling op CodePen. Wilt u een perfect voorbeeld van hoe SVG kan worden gebruikt om online advertenties te revolutioneren? Dit is het.

Denk er eens over: sommige advertentiebedrijven verkopen nog steeds advertenties op basis van de pixelgrootte. Dit heeft geen zin in het tijdperk van oneindige variatie in schermformaten en Retina-schermen om op te starten. Tot we een beter systeem bedenken dan visuele advertenties, zou SVG ons op zijn minst kunnen helpen advertenties passend te maken in de responsieve aard van webontwerp.

Zie de pen Snap display-advertentie door CJ Gammon ( @cjgammon ) aan CodePen .

Jtop desktop-interface

Het Mozilla Developer Network, een entiteit waar ik steeds tegenaan loop als ik onderzoek naar webtechnologieën in het algemeen, heeft ook een aantal interessante dingen opgeleverd die met SVG zijn gemaakt. Ze gingen bijvoorbeeld en maakten een volledige desktopinterface volledig gebaseerd op webtechnologieën zoals HTML5, JS, SVG en CSS. Het is snel, aanpasbaar en ik zou bijna willen dat het deel uitmaakte van een echt besturingssysteem.

Een tijd van bezinning

Bij ons gebracht door ShinyDemos (die op zijn beurt door de mensen bij ons wordt gebracht) Opera ) Een tijd van bezinning zal letterlijk een klok over een live-feed van je webcam leggen. Nou, als je het je toestemming geeft, en je hebt eigenlijk een camera. Maar het gaat erom dat het laat zien hoe SVG-maskers op bijna alles kunnen worden overgebracht.

oblurlay

Door een combinatie van CSS, SVG en jQuery, oblurlay creëert precies wat zijn naam doet vermoeden: een vage overlay, iOS-stijl. Het is een jQuery-plug-in, dus de implementatie is niet moeilijk en het geeft netjes weer hoe SVG-filters op allerlei dingen kunnen worden toegepast, niet alleen op de SVG-objecten zelf.

Codrops-demo's

Codrops (eerder genoemd in de sectie zelfstudies) heeft een behoorlijk aantal fascinerende, indrukwekkende en eenvoudig mooie demo's geproduceerd om te laten zien wat SVG kan doen. Elk verdient zijn eigen juiste sectie in dit artikel, maar er zijn er zo veel dat ik ze allemaal in één zet. Als je niet naar iets anders kijkt vanuit deze "Inspiratie" -sectie, bekijk deze dan. Bekijk de demo's en download de bronbestanden. Ga dan de mannen bedanken bij Codrops. Ze verdienen het.

Opmerking: niet al deze zijn SVG-gericht, maar ze gebruiken allemaal SVG-afbeeldingen op de een of andere manier.

Pagina met effecten laden : een reeks creatieve pagina-laadeffecten die SVG-animaties gebruiken met Snap.svg. Het idee is om een ​​overlay te laten zien met een interessante vormanimatie terwijl nieuwe inhoud wordt geladen.

Ideeën voor subtiele zweefeffecten : een aantal creatieve en subtiele hovereffectinspiratie met behulp van moderne CSS-technieken, inclusief 3D-translatie en pseudo-elementen. Ze gebruiken ook SVG. Bekijk het demonstratie voor de tweede reeks effecten.

SVG-tekenanimatie : een klein experiment dat het gebruik van SVG lijntekening-animaties onderzoekt om vooraf te gaan aan de weergave van grafische elementen of website-elementen, waarbij het laden ervan wordt gesimuleerd.

Off-Canvas Menu-effecten : enige inspiratie voor menu-effecten en -stijlen buiten het canvas met CSS-overgangen en SVG-padanimaties.

Stijlen met tooltip Inspiratie : een kleine verzameling met verschillende tooltipstijlen en -effecten voor zwevende bewegingen voor uw inspiratie. Met CSS-transformaties, randradius en SVG-vormen kunnen we modern ogende en interessante tooltips maken.

Inspiratie Stijlen Inspiratie : enkele eenvoudige ideeën en effecten voor onopvallende website-meldingen. Een klein script wordt gebruikt voor het weergeven van sommige stijlen en CSS-animaties worden gebruikt voor de effecten.

Inspiratie voor aangepaste selectie-elementen : enige inspiratie voor het stylen van een aangepaste versie van het select element. Er zijn veel mogelijkheden en vandaag verkennen we enkele ideeën om de gebruiker een keuze in stijl te laten kiezen.

Inspiratie voor Inline Anchor Styles : enige inspiratie voor creatieve en moderne inline ankerstijlen en hover-effecten met behulp van verschillende technieken zoals pseudo-elementovergangen en SVG's.

Pijl navigatiestijlen : enige inspiratie voor pijlnavigatie-stijlen en zweefeffecten met SVG-pictogrammen voor de pijlen en CSS-overgangen en -animaties voor de effecten.

Wankel effect diavoorstelling : de dia's in deze diavoorstelling wiebelen als ze bewegen. Het effect is gebaseerd op het Dribbble-shot van Sergey Valiukh en is gemaakt met Snap.svg en de SVG-paden ... Let op: dit is zeer experimenteel en alleen getest in de nieuwste versies van moderne browsers.

Inpakken

SVG, hoewel nog niet een van de meest gebruikte beeldformaten die er zijn, is goed gedocumenteerd, sterk ondersteund en maakt een groot deel uit van de toekomst van internet. Als je het nog niet gebruikt als onderdeel van je ontwerpproces, is het waarschijnlijk tijd om te beginnen.

Uitgelichte afbeelding, naadloze vector afbeelding via Shutterstock.

• ← 10 gratis WordPress-plugins voor februari 2015
• 21 Samenwerkingshulpprogramma's om uw teamwork te stroomlijnen →