SVG-bestanden van Illustrator naar het web

Scalable Vector Graphics (SVG) is een vectorafbeeldingsformaat dat in 1998 met het leven begon. Het werd altijd ontwikkeld met het web in het achterhoofd, maar pas nu is het internet echt begonnen met in te halen. De relevantie van vandaag valt niet te ontkennen, dus laten we eens kijken naar de basisbeginselen van het gebruik van SVG van Illustrator in de webbrowser.

Notitie: Ik gebruik Adobe Illustrator CC om dingen hier te demonstreren, maar andere versies hebben vergelijkbare (zo niet identieke) opties en hulpmiddelen.

Waarom is SVG nuttig?

Het SVG-formaat is ontwikkeld en wordt nog steeds onderhouden door het World Wide Web Consortium (W3C). Het W3C bestaat uit een groep slimme mensen, die ernaar streven om het web te standaardiseren, waardoor het een open en toegankelijke plek voor iedereen is.

SVG is goed voor het web, vooral deze dagen, omdat het het probleem van de schermresolutie omzeilt. Het maakt niet uit hoe dicht de pixels van uw nieuwe smartphone zijn verpakt, de vectoren worden altijd net zo helder weergegeven als pas gevallen sneeuw, wat niet altijd geldt voor gerasterde beelden.

Bestandsgrootte is altijd een probleem met het web (niemand wil wachten tot een afbeelding van 5 TB in de browser wordt geladen via een mobiele verbinding) en daarom is SVG een vereenvoudigde vectorindeling. Het is gebouwd met XML en veel onnodige "dingen" zijn verwijderd, waardoor het bestand relatief licht is.

Ten slotte kan, gegeven deze XML-bouwstenen, de inhoud van een SVG-bestand net als elk ander element op een webpagina worden gemanipuleerd en gestyled. Onderdelen binnen een SVG kunnen worden geïsoleerd, de kleuren kunnen worden gewijzigd, het slaggewicht kan worden gewijzigd, de transparantie, we kunnen zelfs bepaalde filters toepassen (zoals vervaging), zelfs bezielen - allemaal via CSS en JavaScript.

Wanneer zou ik SVG gebruiken??

De voordelen van een scherpe lijnkwaliteit en het kunnen manipuleren van een grafisch element spreken voor zich, maar waar kun je hiervan profiteren? Hier volgt een kort overzicht van situaties waarin SVG op zichzelf staat:

Elke dag afbeeldingen: Als u een afbeelding op een website gebruikt, moet u overwegen of deze al dan niet als SVG-indeling kan zijn. Zo ja, waarom zou u het niet gebruiken? Fotografie zou een voorbeeld zijn waarbij SVG niet logisch is, maar voor al het andere, denk er even over na.

Scherpe lettertypespecimens laten zien. Waarom lastig vallen met fuzzy raster-indelingen?

Icons: Websites over de hele wereld zijn doorspekt met pictogrammen; ze worden algemeen begrepen (wanneer ze op de juiste manier worden gebruikt) en verkorten de tijd die een gebruiker nodig heeft om een interface te verwerken. Pictogrammen van tegenwoordig worden vaak toegepast op websites via weblettertypen, maar kunnen ook als SVG op een pagina worden geïnjecteerd. Perfect schone en heldere iconen voor iedereen, heerlijk.

Ik heb deze set SVG-pictogrammen nog niet voltooid, maar je bent van harte welkom om ze te downloaden en te gebruiken ...

logos: Als er één ding is dat een bedrijf waardevol moet houden, dan is het zijn identiteit. SVG biedt de beste manier om branding op internet te tonen, eenvoudig en duidelijk. Kleuren kunnen precies zijn, lijnkwaliteit is onberispelijk en hetzelfde bestand kan herhaaldelijk op één website worden gebruikt, maar kan afhankelijk van de omstandigheden worden gewijzigd. Perfect.

Herken dit logo?

Decoratie: Ik hoef dit idee niet te verkopen aan een lading vectorartiesten, of wel?

SVG-decoratie met dank aan fixate.it

animatie: Via CSS3 en JavaScript heeft een hele wereld van animatie zich opengesteld voor het web. SVG is ook het perfecte voertuig, om alle redenen die ik tot nu toe heb genoemd. Kun je je knoppen voorstellen die bewegen wanneer je eroverheen rolt? Pictogrammen die u direct gepersonaliseerde feedback geven? De lucht is echt de limiet.

Iconisch met SVG-feedback

Dus dat is wat SVG is. Een vectorformaat, ontwikkeld met het web in gedachten. Laten we eens kijken hoe we het kunnen gebruiken.

Een bestand opslaan als SVG

We gaan werken met een echt basale afbeelding om aan te tonen wat SVG doet.

Nieuw document

Open Illustrator, begin een nieuw document (Bestand> Nieuw document), geef het een naam als je dat wilt en stel het tekengebied in op 300 x 300 px.

Kies een afbeelding

Het maakt weinig uit wat je nu als demovector gebruikt, maar je gaat voor iets relatief eenvoudigs. Ik heb de "Geen Piraten Toegestane" glyph gebruikt, vrij verkrijgbaar met het lettertype "Webdings" (ik had nooit gedacht dat ik dat voor iets zou gebruiken!)

Ga naar de glyphs paneel (Typ> Glyphs) selecteer vervolgens het lettertype "Webdings" om door de verschillende beschikbare tekens te bladeren.

Met de Text Tool geselecteerd, klikt u op het tekengebied en vervolgens op Dubbelklik jouw glyph naar keuze om er gebruik van te maken.

Converteren naar contouren

We gaan dit type glyph nu omzetten in contouren.

Notitie: SVG ondersteunt wel tekstobjecten, maar om dingen op een fundamenteel niveau te demonstreren, kiezen we voor paden.

Selecteer de glyph met behulp van de Selectie gereedschap (V):

Ga dan naar Typ> Contouren maken.

Super! We hebben nu een padgebaseerd vectorobject.

Besparing

Als u dit document als SVG wilt opslaan, gaat u naar Bestand> Opslaan, of Bestand> Opslaan als ... Kies in het dialoogvenster dat verschijnt een locatie, geef het een bestandsnaam (als je dit nog niet hebt gedaan) en selecteer SVG als het formaat:

Je krijgt dan een nieuwe dialoog te zien, deze keer met enkele SVG-opties.

In alle waarheid, zal het negeren van deze opties op dit punt u perfect van dienst zijn. De standaardwaarden zijn allemaal zoals u ze onder normale omstandigheden wilt hebben.

We zullen een paar van deze opties een beetje later bespreken, maar voor nu, klik OK.

We hebben een SVG-bestand!

Dus dan, die SVG-opties

We hebben de SVG-opties overgeslagen omdat u er niet echt veel aandacht aan hoeft te schenken. Laten we echter eens een kijkje nemen, omdat we grondig zijn.

SVG versus SVGZ

Om te beginnen hadden we twee mogelijke SVG-indelingen kunnen kiezen in de opslagdialoog.

SVGZ is een sterk gecomprimeerde (zipped, Ik veronderstel) versie van SVG. Het geeft een kleinere bestandsgrootte, maar verandert de XML in het bestand zelf in brabbeltaal, waardoor we de vectoren niet kunnen manipuleren via CSS en JavaScript als we willen.

SVG-profielen

Het steeds veranderende landschap van het web en de voortdurende ontwikkeling van webstandaarden betekenen dat SVG altijd groeit. Dit is te zien aan de hand van de eerste optie bij het opslaan van een SVG-bestand: SVG-profielen. De profielkeuzes zien er momenteel als volgt uit:

Ze betekenen (min of meer) het volgende:

SVG 1.0: De eerste (2001) incarnatie van SVG
SVG 1.1: Vrijwel hetzelfde als SVG 1.0, behalve dat SVG 1.1 kan worden gesplitst in andere subtypen, namelijk die ...
SVG Tiny 1.1: Dit is het eerste subtype van SVG 1.1 en is geoptimaliseerd met het mobiele web in gedachten. Het is een heel eenvoudige vorm van SVG, ontworpen voor "zeer beperkte mobiele apparaten". Tiny ondersteunt geen verlopen, transparantie, knippen, maskers, symbolen, patronen, onderstrepingstekst, doorgestreepte tekst, verticale tekst of SVG-filtereffecten.
SVG Tiny 1.1+: Een lichte ontwikkeling van SVG Tony 1.1, toevoeging van ondersteuning voor gradiënten en transparantie.
SVG Basic 1.1: Dit is het tweede subtype van SVG 1.1 en biedt functies voor mobielere apparaten, zoals smartphones. Basic ondersteunt geen niet-rechthoekige clipping en sommige SVG-filtereffecten.
SVG Tiny 1.2: Dit was oorspronkelijk bedoeld als de volgende volledige specificatie voor SVG, maar werd uiteindelijk een ontwikkeling van het subtype Tiny. Vraag me niet wat in hemelsnaam het verschil is.

Binnenkort kunnen we toevoegen SVG 2.0 naar deze lijst. In werkelijkheid zijn de nuances van deze profielen grotendeels irrelevant voor ons. SVG is in staat allerlei dingen aan te pakken, maar voor eenvoudige vectoren blijven de huidige standaardwaarden van SVG 1.1 behouden en uw afbeeldingen zijn prima, waar mogelijk, op internet.

fonts

SVG-bestanden kunnen veel meer bevatten dan alleen vectorpaden. Tekstobjecten zijn zo'n voorbeeld en de doopvont optie stelt u in staat om te bepalen hoe tekstobjecten worden behandeld.

Adobe CEF: Dit gebruikt font-hinting om meer verfijnde typografie weer te geven. Het wordt echter niet door alle SVG-viewers ondersteund.
SVG: Maximale ondersteuning, herkend door alle SVG-viewers, maar ontbreekt aan de verfijning van Adobe CEF.
Converteren naar contouren: Verwijdert alle bewerkingsmogelijkheden, maar behoudt de tekst op precies dezelfde manier, waar deze ook wordt bekeken. Resultaten in een iets groter bestand, omdat de paden moeten worden beschreven, in plaats van alleen te vermelden welke tekens aanwezig zijn.

Onderdeel van de font-optie is deelverzameling. Dit is alleen relevant als u ervoor heeft gekozen uw tekst niet naar contouren te converteren.

Subset voegt tekendetails in het SVG-bestand in, waardoor het bestand lettertypen kan weergeven die mogelijk niet aanwezig zijn op het systeem van de gebruiker. Insluiting van hele lettertypen (uiteraard) resulteert in veel zwaardere bestanden, hoewel je kunt kiezen hoeveel glyphs er moeten worden opgenomen.

opties

Hoewel we het over insluiting hebben, kunnen de laatst overgebleven opties hier ook van invloed zijn op de bestandsgrootte.

Op dezelfde manier als met lettertypen SVG-bestanden kunnen bitmapafbeeldingen bevatten. Waar je ziet Afbeeldingslocatie kies "embed" om afbeeldingen in het bestand in codevorm te laten opnemen, of kies "link" om de afbeeldingen eenvoudigweg te laten verwijzen. Dit werkt op vrijwel dezelfde manier als het plaatsen van afbeeldingen in Illustrator zelf en heeft grote gevolgen voor de grootte van het eindbestand.

Met het laatste selectievakje hier kunt u Illustrator-bewerkingsmogelijkheden behouden indien nodig. Dit betekent dat details van alle lagen, filters en effecten, symbolen etc. bewaard blijven. Nogmaals, houd dit niet aangevinkt als uw SVG klaar is voor productie en de bestandsgrootte belangrijk is.

Notitie: Het wordt aanbevolen dat u een werkende .AI-bestand blijft gebruiken om te bewerken.

Stel knoppen in

Ten slotte doen de drie knoppen aan de voet van het dialoogvenster Opties het volgende:

Meer opties: Laten we deze voor nu laten, zullen we?
SVG-code ... : Start de XML-code in het SVG-bestand rechtstreeks in een teksteditor.
Wereldbol: Start het SVG-bestand rechtstreeks in een webbrowser. Je kunt het gewoon controleren.

De SVG op internet gebruiken

Als u niet gewend bent om rechtstreeks met internet, HTML, browsers, al die dingen te werken, zijn er op dit punt een paar dingen waar u rekening mee moet houden.

Web browsers

Laten we ten eerste aantonen dat uw browser dit formaat uitstekend aankan. Klik met de rechtermuisknop uw nieuwe, glanzende SVG-bestand en kies ervoor om het te openen met uw standaard webbrowser:

Oudere browsers, zoals Internet Explorer 8 en eerder, ondersteunen het SVG-formaat niet en spelen helaas niet mee.

Meer informatie over SVG en browserondersteuning is te vinden op caniuse.com.

Maar zolang u een moderne browser gebruikt, wordt het SVG-bestand zonder problemen geopend en weergegeven.

Het eerste dat moet worden opgemerkt, is dat het SVG-bestand de dimensies heeft behouden die we oorspronkelijk hebben opgegeven. Onze SVG is geopend met 300 x 300 pixels, het tekengebied heeft de buitenste grenzen gedicteerd en het piratenpictogram is geplaatst zoals het hoort in het midden.

SVG insluiten binnen een webpagina

Tot nu toe hebben we een SVG-bestand gemaakt en we hebben het in een browser geopend om te controleren of het werkt. Nu is het tijd om ons bestand op de juiste manier te gebruiken binnen een webpagina.

Om te beginnen hebben we een webpagina nodig. Dit hoeft niet ingewikkelder te zijn dan een leeg bestand, met de .html bestandsextensie, opgeslagen vanuit een normale teksteditor. We hoeven ons geen zorgen te maken over het hebben van enige code in dit bestand, maar als je geïnteresseerd bent in de basisprincipes van HTML, kijk dan eens naar De beste manier om HTML te leren.

Hier is mijn bestand, geopend in TextEdit voor Mac OS X, maar je kunt elke gewenste tekst of code-editor gebruiken.

Dit bestand wordt net zo goed geopend in een webbrowser als het is, maar we moeten wat HTML-markup-code toevoegen om de SVG in te sluiten. Er zijn een paar manieren om dit te doen.

De Tagbenadering

Ten eerste kunnen we een afbeeldingstag gebruiken (die u misschien gebruikt voor het gebruik van JPG-, PNG-bestanden, enz.), Wijzend op het exacte pad binnen de src = "" attribuut. Plak dit fragment in uw HTML-bestand:

Ervan uitgaande dat het bestandspad correct is, wordt uw HTML-pagina zo geopend in een browser:

Ja, ik weet dat het algemene effect in dit stadium precies hetzelfde is als toen we de SVG rechtstreeks in de webbrowser opende, maar nu hebben we veel meer kracht! We kunnen bijvoorbeeld de SVG onmiddellijk groter maken door de width = "" attribuut:

Een mooie, heldere SVG, oneindig schaalbaar!

Deze aanpak is misschien het gemakkelijkst, maar het heeft zijn problemen. Sommige browsers beperken om veiligheidsredenen wat u kunt doen de SVG (bijvoorbeeld met JavaScript). Laten we naar alternatieven kijken.