Schaalbare vectorafbeeldingen – Het internet heeft een lange weg afgelegd sinds de HTML5 werd populair en mensen begonnen naar de JavaScript als een taal die in staat is veel complexere toepassingen te ontwikkelen. Als gevolg hiervan meerdere API's zijn verschenen en er is overvloedige inhoud over hoe browsers ze allemaal kunnen verwerken met SVG (Scalable Vector Graphics).
Een paar jaar geleden werd de Microsoft heeft een gedifferentieerde ontwerpbenadering toegepast op al zijn applicaties en diensten, evenals op alle gebruikersinterfaces voor mobiele apparaten. Met de komst van iOS 7Apple heeft zijn uiterlijk- en formaatprincipes vervangen ten gunste van het goede schoon en minimalistisch ontwerp. Toch is Google’s lancering van “Materiaal ontwerp'die overal kan worden gebruikt, van apps tot internet.
In eerste instantie is het belangrijkste voordeel van SVG – dat op internet veel bekendheid geniet – het schaalbare karakter ervan. Bij het samenstellen van een icoon hoeft de ontwerper zich geen zorgen te maken over “hoe zal hij zijn” in verschillende afmetingen of op mobiele apparaten met verschillende pixeldichtheden en focus zojuist om de hulpbron op de beste manier te maken.
Met SVG's is het niet nodig om twee verschillende, op pixels gebaseerde bestandsformaten te exporteren om ze weer te geven netvlies-modus Het is niet-netvlies. In feite hoeft u zich geen zorgen te maken over de pixeldichtheid op elk apparaat, vooral gezien hun niet-gestandaardiseerde aard, maar kunt u de focus liever op het artwork houden.
Zodra het pictogram klaar is, exporteert de ontwerper het naar een enkel bestand in het formaat “SVG”, waarvan het formaat door de ontwikkelaar kan worden aangepast zonder kwaliteitsverlies, gewoon door attributen toe te passen “breedte" Het is "hoogte” met hun respectieve waarden.
Hieronder ziet u een voorbeeld van het Firefox-browserlogo:
upload.wikimedia.org/wikipedia/commons/7/76/Mozilla_Firefox_logo_2013.svg
Hoewel de gegenereerde bestanden “SVG" wees gewoon XML, is de kans veel groter dat u een vectorafbeeldingseditor. De meest voorkomende alternatieven zijn Adobe Illustrator Het is Inktlandschap, maar op macOS hebben we nog een heel goed alternatief genaamd schetsen.
Bovendien werkt SVG het beste als het niet zo complex is. Dit komt omdat de grootte aanzienlijk kan toenemen, afhankelijk van wat u ontwikkelt: effen kleuren zijn bijvoorbeeld veel kleiner dan kleurverlopen. Dit betekent echter niet dat u geen complexe afbeeldingen kunt hebben, maar houd rekening met het probleem met de bestandsgrootte als u bijvoorbeeld SVG op een pagina gaat gebruiken.
Als u Adobe Illustrator-software gebruikt, kunt u enkele dingen doen om deze complexiteit bij het exporteren van het SVG-bestand aanzienlijk te verminderen. Het eerste dat u moet doen, is de afbeeldingen uitbreiden en de attributen wijzigen die het uiterlijk ervan bepalen, en andere eigenschappen van de elementen erin. Dit helpt ook bij zaken als dekking en verlopen.
Een ander belangrijk aspect waar je op moet letten is dat er bij het exporteren ook het een en ander moet gebeuren. Kies profiel SVG-1.1, dat is wat er is grotere compatibiliteit tussen browsers vandaag. De profielen SVG Klein 1.1 en de andere varianten van SVG zijn gericht op mobiele apparaten, maar hebben nog geen adequate ondersteuning.
Als u tekst niet dynamisch hoeft te manipuleren, converteert u ook alle lettertypen naar objecten. Dit zorgt ervoor dat de tekst de kenmerken behoudt die u hebt gedefinieerd, zonder dat de uiteindelijke grootte van het bestand wordt vergroot, aangezien de teksten feitelijk alleen maar objecten zullen zijn.
Omdat het een op tekst gebaseerd bestand is, kan het SVG Het heeft een uitstekende compressiefactor voor verschillende segmenten. Een bestand van 30 KBdaalt bijvoorbeeld naar 9,6 KB wanneer geserveerd met technologie GZIP. Als je de techniek van Gegevens-URI's, een bestand met 13 KB valt naar 4,9 KB wanneer geserveerd met GZIP-compressietechnologie.
Ik hoop dat dit helpt!
Deel het artikel en laat uw commentaar achter! 🙂
