Met behulp van Aangepaste Lettertypen Met SVG in een Image Tag

0
41

Wanneer wij produceren een PNG-afbeelding gebruiken we een <img> – tag of een CSS achtergrond, en dat is het zowat. Het is dood eenvoudig, en werkt gegarandeerd.

PNG is veel eenvoudiger te gebruiken is in HTML dan SVG –

Helaas kan niet hetzelfde gezegd worden voor SVG, ondanks de vele voordelen. Hoewel je verwend worden met de keuzes die bij het gebruik van SVG in HTML, het is echt neer op inline, <object> en <img>, alle met ernstige valkuilen en trade-offs.

Problemen met inline SVG –

Als je inline SVG, je verliest de mogelijkheid om het gebruik van de browser cache, Gzip compressie tussen servers en browsers, en zoekmachine afbeelding indexeren (inline SVG-wordt niet beschouwd als een afbeelding). Hoewel de afbeelding mag niet veranderd, ze zijn altijd geladen en dit veroorzaakt een tragere laadtijd voor uw website, een trade-off die de meeste zijn niet bereid zijn te tolereren.

Daarnaast inline SVG veroorzaakt ook complexe afhankelijkheid problemen waar u niet gemakkelijk kunt het invoegen van afbeeldingen in HTML en hebben hun toevlucht tot scripts (PHP of anderszins). Wanneer u meer dan een paar foto ‘ s, dit wordt een groot probleem als het gaat om het onderhouden van uw website, want in essentie kunt u niet gebruiken voor de <img> – tag niet meer.

Geen twijfel, er zijn gebieden waar inline SVG-schijnt — dat is, als u wilt dat uw afbeeldingen snel, zonder te wachten op de andere middelen in te laden. Afgezien van dat, duidelijk, je kan het gewoon niet inline alles.

Problemen met de tag object

SVG is bekend om zijn uitstekende kwaliteit als die wordt weergegeven op apparaten van alle resoluties en de mogelijkheid om te verwijzen naar externe bronnen — zoals CSS en lettertypen — terwijl de bestandsgrootte erg klein. Het idee is om veel SVGs dat alle delen een enkele CSS of een enkele letter type bestand, de hoeveelheid middelen die je hebt om te downloaden.

De mythe van het delen van resources

Voor velen onbekend, het delen van externe middelen voor de SVG is alleen van toepassing op inline SVG. Omdat het gebruik van de <object> – tags de toegang tot deze middelen, de perceptie is dat de browser zal het downloaden van een enkele kopie van uw CSS, ook al heb je veel <object> – tags die verwijzen naar dezelfde CSS-bestand.

Dit is echter helemaal niet waar:

Meerdere objecten tags downloaden van meerdere CSS

Wat het probleem is het feit dat de <object> – tags worden niet herkend als een beeld, en dus het beeld van zoeken indexering is niet mogelijk.

Verder wat het probleem zijn afhankelijkheidsproblemen. Bijvoorbeeld, stel dat u 100 foto ‘ s, en 25 van hen maken gebruik van een Roboto lettertype, een andere 25 gebruik Lato, 25 Open Sans, terwijl de rest gebruik maken van een combinatie van de drie lettertypen. Uw CSS nodig zou hebben om te verwijzen naar alle drie lettertypen, want het is vrijwel onmogelijk om bij te houden welke bestand is met behulp van die fonts, wat betekent dat u kan worden geladen lettertypen die u misschien niet nodig heeft op bepaalde pagina ‘ s.

De image tag

Dat laat ons achter met de <img> – tag, die heeft een veel te bieden. Want het is dezelfde tag gebruikt voor andere formaten, krijgt u vertrouwd, browser caching, Gzip compressie en image search. Elk beeld staat op zichzelf, zonder afhankelijkheid problemen.

SVG verliezen lettertypen als het gebruikt wordt met de <img> tag

Het enige probleem is , verliest u uw lettertypen. Om meer precies te zijn, indien je geen tekst in uw SVG, tenzij u lettertypen insluit, uw tekst wordt weergegeven met de systeem-fonts, meestal Times New Roman. Je hebt uren besteed aan het selecteren van een mooi lettertype, maar op het moment dat u het gebruik van de <img> – tag om het insluiten van SVG is dat allemaal verloren. Hoe kan dit aanvaardbaar?

Het onderzoeken van het lettertype rastering

Het omzetten van lettertypen in paden

Onze eerste reactie is om te kijken of we het kunnen uitvoeren lettertype rasteren. Het is een veelgebruikte techniek om te zetten lettertypen in paden, dus het zal renderen en op alle apparaten en onderhouden van nul afhankelijkheden. Op het oppervlak, dit werkt erg goed, en op de editor, alles ziet er perfect uit.

Hoewel de gerasterde SVG kwam uit op maar liefst 137 KB ten opzichte van 15,7 MB vóór de rastering, we waren optimistisch, omdat, na het optimaliseren van onze SVG gebruik van Gzip compressie, de gerasterde bestand is teruggebracht tot 11 KB, iets kleiner dan het equivalent PNG op 11.9 KB.

Origineel
Font rastering
Font rastering (.svgz)
15.7 MB 137 KB 11.0 KB
PNG @ 1x
PNG @ 2x
PNG @ 3x
11.9 KB 26.5 KB 42.6 KB
SVG-afbeelding met lettertype rastering

Helaas, zodra we het embedden van de gerasterde SVG-in HTML, vonden we ons optimisme te vroeg. Hoewel het er geweldig uitzien op schermen met hoge resolutie, kwaliteit op lage resolutie weergegeven zijn onaanvaardbaar.

Gerasterde lettertypen op de top en origineel op de bodem

De onderkant van de afbeelding is het origineel, met duidelijk weergegeven lettertypen, terwijl, op de top, lettertypen zijn korrelig, met lettertype rasteren.

Cleartype verschil als weergegeven op schermen

Wat er nu gebeurt, is dat de meeste besturingssystemen zal optimaliseren lettertypen te zorgen dat ze zijn duidelijk en scherp op alle schermen. Op Windows, dit is de zogenaamde ClearType, en omdat we gerasterde onze lettertypen, geen optimalisatie toegepast, wat resulteert in een wazige tekst, vooral zichtbaar op lage-resolutie schermen.

Het is duidelijk dat een vermindering in kwaliteit is onaanvaardbaar, dus terug naar de tekentafel.

Het insluiten van lettertypen naar het werkgebied van rescue

In eerste instantie waren we erg sceptisch over het insluiten van lettertypen, voornamelijk omwille van de ingewikkelde workflow.

Om het insluiten van lettertypen in SVG, moet je eerst weten wat voor lettertype worden gebruikt. Dan moet je deze lettertype-bestanden en download ze. Eenmaal gedownload hebt u om te zetten normaal, vet, cursief en vet cursief om de Base64-codering. Als je het handmatig te doen, het is onmogelijk, over een groot aantal bestanden, om te weten welk bestand maakt gebruik van vet en welke niet. Dan moet u een kopie van alle vier de Base64-gecodeerde strings in uw SVG.

Zeker, er moet een betere manier. En dat is de reden waarom we gebouwd Nano. Nano-scans SVG-automatisch en voegt alleen de lettertypen die worden gebruikt. Bijvoorbeeld, als het vet niet wordt gebruikt, of als er geen tekst bestaat, dan is er geen fonts worden ingesloten.

Nog, is het resulterende bestand is enorm en het is niet concurrerend met de PNG-equivalent, dus we aangesloten afstand en bouwden onze eigen SVG-optimizer (Nano) te verminderen SVG-bestand formaten aan een straaltje. (Zie hoe Nano comprimeert SVG.) Daarnaast zijn we ook geoptimaliseerd hoe we lettertypen insluiten in SVG, wat resulteert in een zeer kleine bestandsgrootte.

SVG-afbeelding met tekst, geoptimaliseerd met Nano en lettertypen ingesloten

Het vergelijken van bestanden en het besparen van bandbreedte

Origineel
Font rastering
Unoptimized het insluiten van lettertypen
Nano voor het insluiten van lettertypen

Grootte 15.7 MB 137 KB 65.2 KB 22.0 KB
Gzip 3.57 MB 11.0 KB 44.5 KB 11.7 MB

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

Grootte 11.9 KB 26.5 KB 42.6 KB
Gzip 12.1 KB 26.1 KB 41.7 KB

Uit het bovenstaande kunnen we zien dat Nano produceert een SVG-dat is extreem lichtgewicht zelfs met ingesloten lettertypen, komen op 11.7 MB (Gzipped) in vergelijking met het equivalent PNG @1x op 11.9 KB. Hoewel dit lijkt misschien onbelangrijk, de totale bandbreedte die zijn opgeslagen op uw site zal zeker aanzienlijk zijn.

Laten we aannemen dat 50% van het verkeer dat wordt een lage resolutie, 40% is 2X resolutie en de resterende 10% is 3X resolutie. Als uw website heeft 10.000 hits op een enkele afbeelding:

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

Als u gebruik maken van Nano, gecomprimeerd SVG-met GZip:

MET 10.000 * 11.7 MB = 117.0 KB

Dit zal resulteren in: 208.1 KB – 117.0 KB = 91.1 KB besparingen, of 43.7%, bandbreedte te sparen, een aanzienlijk bedrag door een maatregel.

Naast de bandbreedte te sparen, krijg je een veel eenvoudiger workflow zonder toevlucht te nemen tot meerdere PNG-afbeeldingen met meerdere srcset, met een veel betere kwaliteit, inclusief besturingssysteem lettertype accentuering om uw beelden blijven helder en scherp op apparaten van alle resoluties. Het beste van alles, een betere ervaring voor uw gebruikers, sinds uw site laadt sneller zijn — vooral op apparaten met een hoge resolutie.

Het grondig testen van Nano

Niet tevreden met de besparingen, begonnen we te zoeken SVG-afbeeldingen te testen, Nano. In totaal 2,571 SVG-bestanden van verschillende formaten en designs werden gebruikt, totaal tot 16.3 MB. En na Nano-optimalisatie, wat resulteert in 6.2 MB, een verbazingwekkende 61.8% besparing in grootte.

Een kleine selectie van de meer dan 2500 SVG-afbeeldingen gebruikt om te testen Nano

Het tonen van een visueel verschil

Vanwege het grote aantal bestanden dat we aan het testen waren, en het verhoogt het van tijd tot tijd, we moeten bouwen aan een geautomatiseerde test, met inbegrip van automatisch markeren pixel verschillen voor en na optimalisatie. Een van de klachten die op andere SVG-optimizers is het feit dat minifying SVG kan breken uw beeld, waardoor het af te maken anders dan het origineel.

Daartoe voeren we over de pixel differentiatie in onze geautomatiseerde test in Nano zelf. Dat is, Nano zal u waarschuwen als het detecteert dat het SVG-het optimaliseert heeft een pixel verschil van meer dan 1% in vergelijking met het origineel, daarom zorgen Nano ‘ s optimalisatie zal nooit breken van een SVG.

Nano optimalisatie van het tonen van visuele verschil

Omdat de fonts zijn ingesloten en bewaard, plus SVG-een vector grafische indeling, waardoor de kwaliteit van de resolutie is onvergelijkbaar met andere raster formaten.

Wat is het volgende?

We hopen dat ons werk zal maken SVG makkelijker om overal te gebruiken. We zijn nu bezig met het produceren van nog kleinere bestandsgrootte, het porten van onze codes om te werken op Node.js zo kunt u het automatiseren van uw productie bouwt met Nano, onder anderen.

Denk je dat je zult vinden Nano in uw projecten? Laat het me weten in de comments!

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!