Verwenden von Benutzerdefinierten Schriftarten Mit SVG in einem Image-Tag

0
42

Wenn wir produzieren ein PNG-Bild verwenden wir ein <img> – tag oder ein CSS-hintergrund, und das ist über es. Es ist tot einfach und garantiert, um zu arbeiten.

PNG ist viel einfacher zu verwenden, die in HTML als SVG

Leider das gleiche kann nicht gesagt werden, für ” SVG, trotz seiner vielen Vorteile. Obwohl Sie die Qual der Wahl bei der Verwendung von SVG in HTML, es ist wirklich darauf zu inline -, <object> und <img>, die alle mit schweren Einschränkungen und trade-offs.

Probleme mit inline-SVG

Wenn Sie inlining SVG, verlieren Sie die Fähigkeit zu verwenden, browser-cache, Gzip-Komprimierung zwischen Servern und Browsern und Suchmaschinen Bild-Indizierung (inline-SVG nicht als Bild). Auch wenn Ihr Bild noch nicht geändert wurde, ein bit, Sie werden immer neu geladen und das führt zu langsameren Ladezeiten für Ihre website, einen trade-off, dass die meisten nicht bereit, zu tolerieren.

Darüber hinaus inlining SVG verursacht auch komplexe Probleme mit Abhängigkeiten, wo man nicht einfach Bilder einfügen in HTML und zurückgreifen müssen, um scripts (PHP oder andere). Wenn Sie mehr als ein paar Bilder, das wird ein großes problem, wenn es um die Pflege Ihrer Website, weil Sie im wesentlichen nicht mit dem <img> – tag mehr.

Kein Zweifel, es gibt Bereiche, in denen inlining SVG glänzt — wenn Sie möchten, dass Ihre Fotos schnell, ohne zu warten, für andere Ressourcen zu laden. Ansonsten, klar, man kann einfach nicht alles inline.

Probleme mit object-tag

SVG ist bekannt für seine hervorragende Qualität bei der Anzeige auf Geräte aller Auflösungen und Ihre Fähigkeit, beziehen sich auf externe Ressourcen wie CSS und Schriftarten — während die Dateigröße sehr klein. Die Idee ist, haben viele SVGs, dass alle gemeinsam eine einzige CSS oder eine einzelne schriftart-Datei zu reduzieren die Menge an Ressourcen, die Sie herunterladen müssen.

Der Mythos von Ressourcen-sharing

Vielen unbekannt, sharing, externe Ressourcen für SVG gilt nur für inline-SVG. Da die Nutzung des <object> – tags ermöglichen den Zugang zu diesen Ressourcen, die Wahrnehmung ist, dass der browser herunterladen einer einzigen Kopie des CSS, obwohl Sie viele <object> – tags beziehen sich auf die gleichen CSS-Datei.

Aber das ist überhaupt nicht wahr:

Mehrere object-tags laden Sie mehrere CSS

Compounding das problem ist die Tatsache, dass der <object> – tags werden nicht erkannt, als Bild, und damit das Bild Suche Indizierung ist nicht möglich.

Weitere Compoundierung das problem sind Abhängigkeitsprobleme. Zum Beispiel, sagen wir mal, Sie haben 100 Bilder, und 25 von Ihnen verwenden Roboto-Schrift, weitere 25 verwenden Lato, 25 Einsatz von Open-Sans, während der rest eine Kombination aus den drei Schriften. Dein CSS müsste in Bezug auf alle drei Schriften, denn es ist ganz unmöglich zu behalten, welche Datei über welchen Schriften, das heißt, Sie können geladen werden Schriftarten, die Sie vielleicht nicht benötigen, auf bestimmten Seiten.

Das image-tag

Das lässt uns mit dem <img> – tag, das hat eine Menge Los für Sie. Denn es ist der gleiche tag verwendet, für andere Grafik-Formate erhalten Sie Vertrautheit, browser caching, Gzip-Komprimierung und Bild suchen. Jedes Bild ist eigenständig, ohne Abhängigkeit Probleme.

SVG verliert Schriften, wenn verwendet, mit dem <img> – tag

Das problem ist nur, Sie verlieren Ihre Schriften. Um genauer zu sein, wenn Sie den text in Ihrem SVG, wenn Sie Schriftarten einbetten, die im text angezeigt werden mit system-fonts, in der Regel Times New Roman. Sie haben Stunden damit verbracht, die Auswahl einer schönen Schrift aber in dem moment, verwenden Sie das tag <img> zum einbetten von SVG, die alle, die verloren gegangen ist. Wie kann dies akzeptabel sein?

Die Untersuchung Schrift-Rasterung

Umwandlung von Schriften in Pfade

Unsere erste Reaktion ist, um zu sehen, wenn wir durchführen können Schrift-Rasterung. Es ist eine Häufig verwendete Technik zum konvertieren von Schriften in Pfade, so dass es dann render gut auf alle Geräte und halten null Abhängigkeiten. Auf der Oberfläche, das funktioniert sehr gut, und im editor sieht alles perfekt aus.

Obwohl der gerasterten SVG kam auf eine satte 137 KB im Vergleich zum 15.7 KB vor dem Rastern, wir waren optimistisch, da nach der Optimierung unserer SVG mit Gzip-Komprimierung, die gerasterte Datei wird reduziert auf 11 KB, etwas kleiner als die entsprechende PNG am 11.9 KB.

Original
Schrift-Rasterung
Schrift-Rasterung (.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-Grafik mit Schrift-Rasterung

Ach, wenn wir das einbetten der gerasterten SVG in HTML, fanden wir unser Optimismus verfrüht zu sein. Obwohl es vielleicht gut Aussehen auf hochauflösenden displays, die Qualität auf niedrig auflösenden displays sind nicht akzeptabel.

Gerasterte Schriften auf top und original bei der unteren

Unten im Bild ist das original, mit übersichtlich dargestellten Schriften, während, oben, Schriften sind verpixelt mit Schrift-Rasterung.

Cleartype Unterschied bei der Anzeige auf Bildschirmen

Was passiert, ist, dass die meisten Betriebssysteme optimieren-Schriftarten, um sicherzustellen, dass Sie sind klar und scharf auf alle Bildschirme. Unter Windows heißt diese ClearType aus, und da wir unserer Schriften gerastert, keine Optimierungen angewendet werden, was in unscharfen text, besonders sichtbar auf low-resolution-Bildschirme.

Natürlich, eine Minderung der Qualität nicht hinnehmbar ist, also zurück zum Reißbrett.

Das einbetten von Schriftarten, um die Rettung

Zunächst waren wir äußerst skeptisch, was die font-Einbettung, vor allem wegen der komplizierten workflow.

Zum einbetten von fonts in SVG, müssen Sie zunächst wissen, welche Schrift-Familien verwendet werden. Dann müssen Sie finden diese schriftart-Dateien und laden Sie Sie herunter. Einmal heruntergeladen, müssen Sie konvertieren regelmäßige, bold, Kursiv und Fett-Kursiv auf Base64-Codierung. Wenn Sie es manuell zu tun, ist es ganz unmöglich, über eine große Anzahl von Dateien, zu wissen, welche Datei verwendet bold und welche nicht. Dann kopieren Sie alle vier Base64-kodierte strings in Ihre SVG.

Sicherlich, es muss einen besseren Weg geben. Und das ist, warum wir Bauten Nano. Nano-scans SVG automatisch und fügt nur die Schriftarten, die verwendet werden. Zum Beispiel, wenn Fett nicht verwendet wird oder wenn kein text vorhanden ist, dann sind keine Schriftarten eingebettet werden.

Noch, die resultierende Datei ist riesig und ist nicht wettbewerbsfähig mit der PNG-äquivalent, also stöpseln wir uns Weg und Bauten unsere eigenen SVG-Optimierer (Nano), die die SVG-Datei-Größen zu einem Rinnsal. (Sehen Sie, wie Nano-SVG komprimiert.) Darüber hinaus haben wir auch optimiert, wie wir das einbetten von fonts in SVG, was in sehr kleinen Dateigrößen.

SVG-Bild mit text, optimiert, die mit Nano und Schriften eingebettet

Vergleich der Dateigrößen und Bandbreite sparen

Original
Schrift-Rasterung
Nicht optimierte schriftart einbetten
Nano-schriftart einbetten

Größe 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

Größe 11.9 KB 26.5 KB 42.6 KB
Gzip 12.1 KB 26.1 KB 41.7 KB

Aus den oben genannten, können wir sehen, dass die Nano erzeugt eine SVG, die ist extrem leicht, sogar mit eingebetteten Schriften, kam am 11.7 KB (Gzip) im Vergleich mit den entsprechenden PNG @1x am 11.9 KB. Dies mag zwar unbedeutend erscheinen, die gesamte Bandbreite gespeichert auf Ihrer Website wird sicherlich erheblich sein.

Lassen Sie uns davon ausgehen, dass 50% des Verkehrs ist in niedriger Auflösung, bis zu 40% 2X Auflösung und die restlichen 10% ist die 3X Auflösung. Wenn Ihre website verfügt über 10.000 hits auf einem einzigen Bild:

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

Wenn Sie verwenden Sie Nano, SVG komprimiert mit GZip:

10,000 * 11.7 KB = 117.0 KB

Das Ergebnis: 208.1 KB – 117.0 KB = 91.1 KB Einsparungen oder 43.7%, Bandbreite eingespart, eine erhebliche Menge durch jede Maßnahme.

Zusätzlich zu den Einsparungen an Bandbreite, Sie erhalten eine weit einfachere workflow ohne Rückgriff auf mehrere PNG-Bilder mit mehreren srcset, mit viel besserer Qualität, einschließlich der Betriebssystem-schriftart-Erweiterung, um sicherzustellen, dass Ihre Bilder bleiben knackig und scharf auf die Geräte aller Auflösungen. Am besten von allen, eine bessere user-experience für Ihre Nutzer, da Ihre Website schneller geladen werden — besonders auf Geräten mit hoher Auflösung.

Gründlich zu testen, Nano

Nicht zufrieden mit all den Einsparungen, die wir zu suchen begann für SVG-Bilder ausgiebig zu testen Nano. Insgesamt 2,571 SVG-Dateien in verschiedenen Größen und designs verwendet wurden, in Höhe von bis 16.3 MB. Und nach Nano-Optimierung, was in 6.2 MB, eine erstaunliche 61.8% ersparnis in der Größe.

Eine kleine Auswahl von über 2500 SVG-Bilder verwendet, um zu testen, Nano

Zeigt einen visuellen Unterschied

Wegen der schieren Anzahl der Dateien, die wir testen, und es erhöht sich von Zeit zu Zeit, die wir haben, um eine automatisierte Prüfung, einschließlich der automatischen Hervorhebung pixel-Unterschiede vor und nach der Optimierung. Eine der Beschwerden auf andere SVG-Optimierer ist die Tatsache, dass minifying SVG Mai brechen Sie Ihr Bild, so dass es zu Rendern anders im Vergleich zum original.

Zu diesem Zweck führen wir über die pixel Differenzierung in unserer automatisierten Tests in Nano selbst. ,, Nano wird Sie warnen, wenn es erkennt, dass die SVG-Sie optimiert einen pixel Unterschied von mehr als 1% im Vergleich zum original, damit die Nano-Optimierung ist es nie eine SVG.

Nano-Optimierung zeigt visuellen Unterschied

Denn Schriften sind eingebettet und konserviert, plus SVG als Vektor-Grafik-format, die rendering-Qualität auf die Auflösung ist unvergleichlich zu anderen raster-Formate.

Was kommt als Nächstes?

Wir hoffen, dass unsere Arbeit machen SVG einfacher, überall zu verwenden. Wir arbeiten nun auf die Herstellung von noch kleineren Dateigrößen, die Portierung unserer codes zu arbeiten Node.js so können Sie automatisieren Ihre Produktion und baut mit Nano, unter anderem.

Denkst du, du wirst finden, Nano hilfreich in Ihren Projekten? Lasst mich in den Kommentaren wissen!

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!