Ved hjelp av Tilpassede Fonter Med SVG i en Bilde-Koden

0
41

Når vi produserer et PNG-bilde, vi bruker en <img> – tag, eller en CSS-bakgrunn, og det er om det. Det er kjempeenkel og er garantert å fungere.

PNG er langt enklere å bruke i HTML enn SVG

Dessverre, det samme kan ikke sies for SVG, til tross for sine mange fordeler. Selv om du er bortskjemt for valg når du bruker SVG i HTML, er det virkelig koker ned til inline, <objekt> og <img>, alle med alvorlige mest profesjonelle veldrevne og trade-offs.

Problemer med inline SVG

Hvis du er inlining SVG, mister du muligheten til å bruke nettleserens cache, Gzip komprimering mellom servere og nettlesere, og søkemotor image indeksering (inline SVG er ikke ansett som et bilde). Selv om bildet ikke har endret seg litt, de er alltid på nytt, og dette fører til tregere lasting tid for ditt nettsted, er en trade-off, som de fleste er ikke villige til å tolerere.

I tillegg, inlining SVG fører også kompleks avhengighet problemer der det ikke lett å sette inn bilder i HTML og må ty til skript (PHP eller på annen måte). Når du har mer enn et par bilder, dette blir et stort problem når det gjelder å vedlikeholde nettstedet ditt, i hovedsak fordi du ikke kan bruke <img> – tag lenger.

Ingen tvil, det er områder hvor inlining SVG-skinner — det er, hvis du vil at bildene skal vises raskt, uten å vente på andre ressurser for å laste. Bortsett fra det, er klart, du kan bare ikke inline alt.

Problemer med object-koden

SVG er godt kjent for sin gode kvalitet når de vises på enheter i alle oppløsninger, og dens evne til å referere til eksterne ressurser — som CSS og skrifter — mens å holde filstørrelsen er svært liten. Ideen er å ha mange SVGs som alle deler en enkelt CSS eller en enkel font-filen, for å redusere mengden ressurser du har til å laste ned.

Myten om ressurs-deling

Ukjent for mange, deling av eksterne ressurser for SVG-gjelder bare til inline SVG. Fordi bruk av <object> – koder, tillater tilgang til disse ressursene, og oppfatningen er at nettleseren vil laste ned én kopi av CSS, selv om du har mange <object> – kodene refererer til den samme CSS-fil.

Dette er imidlertid ikke sant i det hele tatt:

Flere objekt-tagger vil laste ned flere CSS

Compounding problemet er det faktum at <object> – kodene er ikke anerkjent som et bilde, og derfor bildesøk indeksering er ikke mulig.

Videre compounding problemet er avhengighet problemer. For eksempel, la oss si at du har 100 bilder, og 25 av dem bruker en Roboto skrift, en annen 25 bruk Lato, 25 bruke Åpne Sans, mens resten bruke en kombinasjon av de tre skrifter. CSS ville ha behov for å referere til alle tre skrifter fordi det er helt umulig å holde styr på hvilken fil som er med som skrifter, som betyr at du kan laste inn skrifter du kan ikke kreve på bestemte sider.

Bildet tag

Som etterlater oss med <img> – tag-en, som har mye å gå for det. Fordi det er den samme koden som brukes for andre bildeformater, får du kjennskap, browser caching, Gzip komprimering og bildesøk. Hvert bilde er selvbetjent, med ingen avhengighet problemer.

SVG å miste skrifter hvis brukt med <img> – tag

Det eneste problemet er at du vil miste din skrifter. For å være mer presis, hvis du har noen tekst i SVG, med mindre du legge inn skrifttyper, teksten vil bli vist med system skrifter, vanligvis Times New Roman. Du har brukt timer å velge en vakker skrift, men i det øyeblikket du bruke <img> – tag-en for å legge inn SVG, alt som er tapt. Hvordan kan dette være akseptabelt?

Gransker skriften rasterization

Konvertering skrifter i veier

Vår første reaksjon er å se om vi kan utføre skrift rasterization. Det er en mye brukt teknikk for å konvertere skrifter i veier, så det vil yte godt på alle enheter og opprettholde null avhengigheter. På overflaten, dette fungerer veldig bra, og på redaktøren, alt ser perfekt ut.

Selv om det rastrerte SVG kom inn på en heidundrende 137 KB forhold til 15.7 KB før rasterization, vi var optimistiske fordi, etter optimalisere vår SVG bruke Gzip komprimering, det rastrerte filen er redusert til 11 KB, litt mindre enn de tilsvarende PNG på 11.9 KB.

Original
Skrift rasterization
Skrift rasterization (.svgz)
15.7 KB 137 KB 11.0 KB
PNG @ 1x
PNG @ 2x
PNG @ 3x
11.9 KB 26.5 KB 42.6 KB
SVG-bilete med skrift rasterization

Akk, når vi lagd den rastrerte SVG-filer til HTML, fant vi vår optimisme å være for tidlig. Selv om det kanskje ser bra ut på skjermer med høy oppløsning, kvalitet på lav oppløsning skjermer er uakseptabelt.

Rastrerte skrifter på toppen og originale nederst

Nederst i bildet er den opprinnelige, med tydelig skrifter mens, på toppen, skrifter er kornete med skrift rasterization.

Cleartype forskjell når vises på skjermer

Det som skjer er at de fleste operativsystemer vil optimalisere skrifter for å sikre at de er vist klart og tydelig på alle skjermer. På Windows, dette kalles ClearType, og siden vi rastrerte våre skrifter, ingen optimaliseringer vil bli brukt, noe som resulterer i uklare tekst, spesielt synlig på lav oppløsning skjermer.

Selvsagt, en reduksjon i kvaliteten er for dårlig, så tilbake til tegnebrettet.

Skriftinnebygging til unnsetning

I utgangspunktet, vi var svært skeptisk til font embedding, hovedsakelig på grunn av komplisert arbeidsflyt.

For å legge inn skrifttyper i SVG, må du først vite hva font familier er brukt. Deretter må du finne disse font filer og laste dem ned. Når lastet ned, må du konvertere vanlige, fet skrift, kursiv og fet kursiv for å Base64-koding. Hvis du gjør det manuelt, det er helt umulig, over et stort antall filer, for å vite hvilken fil som bruker fet og hvilke som ikke gjør det. Da må du kopiere alle fire Base64-kodet strenger inn i SVG.

Sikkert, det må være en bedre måte. Og det er derfor vi har bygget Nano. Nano skanner SVG automatisk og setter inn bare de skrifter som er brukt. For eksempel, hvis fet skrift er ikke brukt, eller hvis ingen tekst eksisterer, så ingen skrifter vil være integrert.

Likevel, den resulterende filen er stor, og er ikke konkurransedyktig med PNG tilsvarende, så vi satt bort og bygget vår egen SVG optimizer (Nano) som vil redusere SVG-fil størrelser til en vedlikeholdslading. (Se hvordan Nano komprimerer SVG.) I tillegg har vi også optimalisert hvordan vi bygge inn skrifter i SVG, noe som resulterer i svært små størrelser.

SVG-bilete med tekst, optimalisert med Nano og skrifter innebygde

Sammenligning av filstørrelser og båndbredde besparelser

Original
Skrift rasterization
Unoptimized skriftinnebygging
Nano skriftinnebygging

Størrelse 15.7 KB 137 KB 65.2 KB 22.0 KB
Gzip 3.57 KB 11.0 KB 44.5 KB 11.7 KB

PNG @ 1x
PNG @ 2x
PNG @ 3x

Størrelse 11.9 KB 26.5 KB 42.6 KB
Gzip 12.1 KB 26.1 KB 41.7 KB

Fra det ovennevnte, kan vi se at Nano produserer en SVG som er ekstremt lett, selv med innebygde skrifter, kommer inn på 11.7 KB (Gzip) sammenlignet med tilsvarende PNG @1x på 11.9 KB. Mens dette kan synes ubetydelig, den totale båndbredden som er lagret på stedet vil sikkert være betydelig.

La oss anta at 50% av trafikken er lav oppløsning, 40% er 2X oppløsning og de resterende 10% er 3X oppløsning. Hvis nettstedet ditt har 10 000 treff på et enkelt bilde:

5,000 * 11.9 KB + 4,000 * 26.5 KB + 1,000 * 42.6 KB = 208.1 KB

Hvis du bruker Nano, komprimert SVG-med GZip:

10,000 * 11.7 KB = 117.0 KB

Dette vil resultere i: 208.1 KB – 117.0 KB = 91.1 KB besparelser, eller 43.7%, båndbredde besparelser, et betydelig beløp av noen mål.

I tillegg til båndbredde besparelser, får du en langt enklere arbeidsflyt uten å ty til flere PNG-bilder med flere srcset, med mye bedre kvalitet, inkludert operativsystemet skrift ekstrautstyr for å sikre at dine bilder holder seg skarpe og spisse på enheter av alle vedtak. Best av alt, en bedre brukeropplevelsen for brukere, siden nettstedet ditt lastes raskere — spesielt så på enheter med høy oppløsning.

Grundig testing Nano

Ikke fornøyd med alle de besparelser, vi begynte å se for SVG-bilder for å teste grundig Nano. Totalt 2,571 SVG-filer av forskjellige størrelser og design ble brukt, totalt opp 16.3 MB. Og etter Nano optimalisering, noe som resulterer i 6.2 MB, en forbløffende 61.8% reduksjon i filstørrelse.

Et lite utvalg av over 2500 SVG-bilder brukes til å teste Nano

Som viser en visuell forskjell

På grunn av det store antallet filer som vi var testing, og det øker fra tid til annen, vi må bygge en automatisert test, inkludert automatisk utheving pixel forskjeller før og etter optimalisering. En av klager på andre SVG-optimizer er det faktum at minifying SVG kan ødelegge bildet ditt, forårsaker den til å gjengi annerledes i forhold til det opprinnelige.

For dette formål, vil vi bære over piksel differensiering i vår automatisert test til Nano seg selv. Det er, Nano vil advare deg hvis det oppdager at SVG det optimaliserer har en pixel forskjell på mer enn 1% sammenlignet med den opprinnelige, er derfor å sikre Nano er optimalisering vil aldri bryte en SVG.

Nano optimalisering som viser visuelle forskjellen

Fordi skriftene som er innebygd og bevart, samt SVG være en vektor grafikk-format, slik at kvaliteten på alle oppløsning er makeløs til andre raster formater.

Hva er det neste?

Vi håper at vårt arbeid vil gjøre SVG enklere å bruke overalt. Vi jobber nå på å produsere enda mindre filstørrelser, porting våre koder til å arbeide på Node.js slik at du kan automatisere produksjon bygger med Nano, blant andre.

Tror du at du vil finne Nano nyttig i dine prosjekter? Gi meg beskjed i kommentarfeltet!

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!