Het voorbereiden van SVG voor gebruik op internet is een heel eenvoudig proces, niet ingewikkelder dan het exporteren van JPEG of PNG. Gebruik de grafische editor waarmee u bekend bent (Illustrator, Sketch, Inkscape [gratis], enz. [of zelfs Photoshop als u vormlagen gebruikt]) op de afbeeldingsgrootte die u wilt gebruiken. Ik werk meestal in Illustrator, dus ik zal enkele manieren uitleggen waarop je bestanden in dat programma kunt voorbereiden, maar ze zijn over het algemeen van toepassing op elk ander programma. Mogelijk wilt u uw tekst naar curven converteren, omdat het lettertype hoogstwaarschijnlijk onjuist wordt weergegeven, tenzij u van plan bent de tekst op te maken met het weblettertype dat op de pagina wordt gebruikt (wat mogelijk is!). Het is ook geen goed idee om alle objecten naar afzonderlijke vormen te converteren, vooral als u streken hebt die op de pagina moeten worden gemanipuleerd, vooral omdat het converteren van objecten de bestandsgrootte vaak niet verkleint. Alle namen die aan groepen of lagen zijn toegewezen, worden als element-ID aan de SVG toegevoegd. Dit is best handig voor het stylen, maar vergroot de totale grootte bestand.
Voordat u exporteert, moet u controleren of alle afbeeldingen zich in een raster met gehele pixels bevinden (dat wil zeggen, bijvoorbeeld niet 23,3 px × 86,8 px). Anders zal de afbeelding hoogstwaarschijnlijk niet voldoende helder zijn en zal een deel van de afbeelding worden afgesneden. In Illustrator kunt u dit als volgt doen: Object > Tekengebieden > Aanpassen aan illustratiegrenzen. Klik vervolgens op Opslaan als en selecteer SVG en laat de standaardinstellingen staan. Er is wat optimalisatie die we hier kunnen doen, maar dat is echt niet de moeite waard, omdat we later verschillende verbeteringstechnieken zullen gebruiken, dus we zullen voorlopig geen tijd verspillen aan die aanpassingen.
Trucs voor het verkleinen van de bestandsgrootte.
(Zie optimalisatie)
Om het kleinste SVG-formaat te bereiken, zou het logisch zijn om al het overbodige eruit te verwijderen. De bekendste en handig programma(Door ten minste Ik denk het wel) voor het verwerken van SVG is het SVGO . Ze verwijdert alles vereiste code. Maar! Wees voorzichtig bij het gebruik van dit programma als u van plan bent SVG te manipuleren met CSS/JS, omdat het de code te veel kan opschonen, waardoor toekomstige wijzigingen moeilijk worden. Een ander gemak van SVGO is dat het kan worden opgenomen in het proces van het automatisch bouwen van een project, maar je kunt er ook gebruik van maken GUI als je wilt.
Meer gedetailleerd begrijpen met correcte verwijdering al het onnodige, daar kunnen we iets anders in doen grafische editor. Eerst moet je ervoor zorgen dat je zo min mogelijk paden/vormen gebruikt, evenals punten op die paden. Je kunt alles wat vereenvoudigd kan worden combineren en vereenvoudigen, en alles verwijderen onnodige punten. Illustrator heeft een VectorScribe-plug-in met een Smart Remove Brush Tool, waarmee u punten kunt verwijderen en toch kunt vertrekken algemene vorm dezelfde.
Pre-optimalisatie
Slim penseel verwijderen verwijderde punten
Vervolgens zullen we de afbeelding vergroten. In Illustrator is het handig om Weergave > Pixelvoorbeeld in te schakelen en te controleren hoe de omtrekken zijn gepositioneerd. Het kost wat tijd om de contouren op het raster te plaatsen, maar de moeite zal de moeite waard zijn en resulteren in een schonere weergave (het is het beste om hier van tevoren aandacht aan te besteden).
Punten buiten het raster
Uitlijnen op raster
Als er twee of meer objecten moeten worden uitgelijnd, is het de moeite waard om alle onnodige overlappingen te verwijderen. Soms, zelfs als de contouren zorgvuldig zijn uitgelijnd, kan er een dunne witte lijn zichtbaar zijn. Om dit te voorkomen, kunt u de objecten enigszins overlappen waar ze elkaar overlappen. Belangrijk: in SVG heeft de z-index een bepaalde volgorde, die afhangt van het onderliggende object, dus het is de moeite waard om het bovenste object onderaan het bestand in de code te plaatsen.
En tot slot, last but not least, iets dat meestal wordt vergeten, is het inschakelen van gzip-compressie van SVG op uw site in het .htaccess-bestand.
AddType afbeelding/svg+xml svg svgz
Als voorbeeld van hoe effectief deze techniek is, neem ik het originele Breaking Borders-logo en optimaliseer het op deze manier: vergroot de grootte tot wat het zou moeten zijn; Ik zal de contouren op orde brengen; Ik zal zoveel mogelijk punten verwijderen; verplaats de punten met gehele pixels; Ik verplaats alle overlappende gebieden en stuur het allemaal naar SVGO.
Origineel: 1.413b
Na optimalisatie: 409b
Als gevolg hiervan werd de bestandsgrootte ~71% kleiner (en ~83% kleiner bij compressie)
Tegenwoordig is er meer dan één manier om SVG-animatie te maken. Dit kan worden gedaan met behulp van een tag die rechtstreeks in de SVG-code wordt ingevoegd. Er zijn speciale bibliotheken zoals Snap.svg of SVG.js.
We zullen een iets andere aanpak bekijken: het gebruik van inline SVG (SVG-code rechtstreeks in HTML) en animatie afzonderlijke onderdelen rechtstreeks via CSS.
Ik heb onlangs met deze methode geëxperimenteerd in een project voor mijn alma mater Wufoo, als een opfrisser over het onderwerp dat we hier zullen behandelen.
Ik heb SVG niet veel gebruikt in mijn recente projecten, dus ik denk dat dit artikel een geweldige kans is om er meer aandacht aan te besteden.
De uiteindelijke animatielook is heel eenvoudig. Hier is hoe het eruit ziet:
Bekijk op CodePen
Laten we eens kijken hoe dit wordt gedaan.
1. Maak een lijst met elementen die we gaan gebruiken
Het lijkt misschien dat er hier veel werk zit in het tekenen van een uil, maar dit artikel gaat over animatie, dus laten we zo snel mogelijk met afbeeldingen omgaan.
Mijn plan was om een supereenvoudige Wufoo-advertentie te maken met hun klassieke logo, kleuren en huisstijl. En voeg dan een beetje creativiteit toe:
- Creëer het effect dat de letters van de pagina lopen. Wufoo is een leuk woord, laat de letters ook leuk zijn;
- De dag ervoor ontwierpen we een T-shirt met een dinosaurus op de voorkant en de woorden op de achterkant: “ Snel. Slim. Grozny" Dit zijn eigenschappen die zowel dinosaurussen als Wufoo delen. Om nog maar te zwijgen van het feit dat we op het woord “FORMidble” (formidable) speelden. Dus ik wilde deze woorden laten verschijnen en verdwijnen in het animatieblok;
- Om deze woorden met een dinosaurus te verbinden, laten we het hoofd van de T-Rex verschijnen en dan snel verdwijnen. Hierdoor wordt het woord "Snel" weergegeven, wat een andere interessante link voor de elementen zal zijn.
- Ik heb al deze elementen in Illustrator geladen:
Let op hoe het logo en de sloganteksten zijn omlijnd. Dit betekent dat het eenvoudigweg vectorvormen zijn en dat er eenvoudig effecten op kunnen worden toegepast, zowel in SVG als in
De tekst die je ziet is “Snel. ” blijft in Illustrator in tekstformaat.
Wanneer ik het bestand opsla in Illustrator, blijft de belettering een element.
2. Opslaan in SVG-formaat
Illustrator ondersteunt opslaan als SVG:
U kunt dit SVG-bestand openen in een code-editor en de SVG-code erin bekijken:
3. Ruim de SVG op en stel klassen in voor de vormen
U kunt de code via SVGO uitvoeren om deze te optimaliseren en op te schonen onnodige elementen typ DOCTYPE en dergelijke.
Maar wat nu belangrijker voor ons is, is om de vormen verschillende klassennamen te geven, zodat we ze in CSS kunnen selecteren en verschillende dingen kunnen doen!
4. Voeg SVG in
U kunt deze SVG-code kopiëren en rechtstreeks in de HTML plakken waar u het blok wilt laten verschijnen. Maar dit is slechts een primitief sjabloon.
Je kunt zoiets als dit doen:
5. Animatie!
Nu worden al deze vormen in de DOM gedreven, en we kunnen ze net als alle andere positioneren en stijlen instellen HTML-element. Laten we dit doen.
Laten we zeggen dat we een tijdlijn van 10 seconden willen gebruiken:
De eerste woorden vallen eruit en verdwijnen
Het eerste dat we willen doen is de woorden " Snel. Slim. Grozny.» Elk woord wordt één seconde weergegeven.
Zo maken we een animatie waarbij elk woord 10% van de tijd in beslag neemt:
@keyframes hideshow ( 0% ( dekking: 1; ) 10% ( dekking: 1; ) 15% ( dekking: 0; ) 100% ( dekking: 0; ) )
Vervolgens geven we het eerste woord en de duur van de gehele animatie aan op 10 seconden (waarvan 10% 1 seconde):
Tekst-1 ( animatie: hideshow 10s gemak oneindig; )
De volgende twee woorden worden eerst verborgen (dekking: 0; ), en daarna gebruiken we dezelfde animatie, alleen met een vertraging, zodat de volgende woorden iets later verschijnen:
Tekst-2 ( dekking: 0; animatie: hideshow 10s 1,5s gemak oneindig; ) .text-3 ( dekking: 0; animatie: hideshow 10s 3s gemak oneindig; )
Er is nog eens 0,5 seconde nodig om het interval tussen de uitvoer van elk volgend woord in te stellen.
Springende letters
Nadat we de animatie voor dit element hebben ingesteld, gaan we verder met de effecten voor de letters in het woord Wufoo, die als volgt opzij zouden moeten springen:
De truc hier is dat we creëren animatie-effect, die maar 5 seconden duurt, maar we laten hem één keer vooruit en dan in de tegenovergestelde richting lopen.
Het komt dus overeen met onze 10-secondengrafiek en bevindt zich in het midden van de tijdlijn. Het enige dat we hoeven te doen is de parameters instellen voor het scrollen van het animatie-effect in één richting, want wanneer omgekeerde scroll het keert eenvoudigweg terug naar zijn oorspronkelijke positie.
De effecten voor elke letter hebben een kleine tijdsvertraging, dus ze bewegen niet allemaal tegelijkertijd, maar na elkaar:
Wufoo-letter ( animatie: kaboom 5s gemak alternatief oneindig; &:nth-child(2) ( animatie-vertraging: 0,1s; ) &:nth-child(3) ( animatie-vertraging: 0,2s; ) &:nth- kind(4) ( animatie-vertraging: 0,3s; ) &:nth-child(5) ( animatie-vertraging: 0,4s; ) ) @keyframes kaboom ( 90% ( transformatie: schaal(1,0); ) 100% ( transformatie : schaal(1,1);
De bovenstaande SCSS-code is slechts een korte versie en bevat geen voorvoegsels (die u in de praktijk nodig heeft).
Ik denk dat animatie-vertraging een eigenschap is die nuttig zou zijn om uit de originele CSS te halen. Het ziet er netter uit als de letters met een kleine vertraging bewegen.
En tot slot de dinosaurus
Nadat deze inscripties over het blok flitsen, komt het hoofd van een dinosaurus van onderaf tevoorschijn. Ondanks het feit dat de dinosaurusfiguur uit bestaat grote hoeveelheid elementen, kunnen we ze allemaal samen positioneren met behulp van een positioneringstag (groep), die al deze elementen bevat.
Omdat het efficiënter is om transformaties te gebruiken om animaties te positioneren, doen we dit met behulp van keyframes:
@keyframes pop-up ( 0% ( transformatie: vertalenY(150px); ) 34% ( transformatie: vertalingY(20px); ) 37% ( transformatie: vertalingY(150px); ) 100% ( transformatie: vertalingY(150px); ) )
We willen dat deze animatie in de "laatste" ongeveer 3 seconden wordt weergegeven. Deze cyclus werkt feitelijk de gehele 10 seconden, maar de daadwerkelijke zichtbare effecten zie je gedurende de laatste 3 seconden.
Wanneer translationY(150px) wordt toegepast in het effect, beweegt de dinosaurus zo ver naar beneden buiten het kader dat je hem niet kunt zien.
Maar gedurende 37% van de tijd van deze animatie (ongeveer 3 seconden) zie je hem langzaam omhoog bewegen en dan snel weer naar beneden bewegen.
Wanneer we deze animatie toepassen, zorgen we ervoor dat:
- De dinosaurus is eerst verborgen;
- De uitvoer van dit animatiefragment is vertraagd in de tijd en begint dus onmiddellijk nadat de letters in het logowoord hun dans hebben beëindigd (ze zijn opzij gegaan en teruggekeerd naar hun plaats).
Trex ( transformeren: vertalenY(150px); animatie: pop-up 10s 6,5s gemak oneindig; )
De dinosaurus valt net op de laatste seconde naar beneden zodat onmiddellijk daarna het woord “Snel” weer in het blok verschijnt (de afspeelinterval van de animatie is ingesteld op oneindig zodat deze steeds opnieuw in een cirkel loopt). Het voegt een leuke synergie toe.
6. Van het blok een klikbare/interactieve advertentie maken
Een van handige functies SVG is de mogelijkheid om objecten naar elk formaat te schalen zonder kwaliteitsverlies.
Om een inline SVG-box te maken met behoud van de originele kwaliteit van de afbeeldingen, kunnen we de oude opgevulde box-techniek gebruiken.
.wufoo-ad-wrap ( hoogte: 0; opvulling bovenaan: 100%; positie: relatief; ) .wufoo-ad ( positie: absoluut; bovenaan: 0; links: 0; breedte: 100%; hoogte: 100%; )Het idee is dat de “verpakking” altijd de vorm van een vierkant zal aannemen, gebaseerd op de breedte ervan. Dan vragen wij absolute waarden SVG-posities binnen dit perfecte vierkant, waarvan de afmetingen worden aangepast op basis van de breedte.
Aangezien dit een advertentie is (die uiteraard klikbaar moet zijn), dan als een bevattende container, in plaats van