Ich schreibe auf meiner Website einen Artikel über die Vorteile neuer Webtechnologien, unter anderem HTML5, CSS3 und SVGs, wobei einer der Vorteile der letzteren die Möglichkeit ist, Text in einem ansonsten effektiven Bild auszuwählen.
Ich bin neu bei SVGs und habe gerade meine erste anständige Grafik in Illustrator erstellt. Ich habe es in eine Seite mit dem GWF-Skript für die Ubuntu-Schriftart im Tag eingebettet. Wie sich herausstellt, wird die Ubuntu-Schriftart in normalem Text korrekt angezeigt, aber damit dieser Trick im SVG funktioniert, muss das Google-Skript in das SVG selbst eingebettet werden. Wie kann ich das machen?
Sie betten Schriftarten in CSS ein, indem Sie die base64-Codierung verwenden. Sie können Stile in SVG-Dokumenten ähnlich wie CSS anwenden, indem Sie ein <style />
Element verwenden. Wenn Sie also eine WOFF-Schriftart haben, würden Sie sie wie folgt einbetten:
<style>
@font-face {
font-family: "Sample font";
src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>
Wo ...
sind die base64-codierten Schriftdaten.
Beispiele dafür finden Sie in den Stylesheets von Typekit. Ich bin mir nicht sicher, ob der Mime-Typ von font/woff
korrekt ist, da ich auch Leute gesehen habe, die behaupteten, dass es so sein sollte application/font-woff
. Obwohl font/woff
, font/truetype
, font/opentype
, usw. beliebter zu sein scheinen.
Alternativ könnten Sie tatsächlich die SVG-Version der Webschriftart nehmen und das Beschreibungs-Markup der SVG-Schriftart in Ihr Dokument einbetten (obwohl die Browserunterstützung immer noch sehr begrenzt ist, wie Luke in den Kommentaren feststellt).
Sie sollten jedoch auch auf eine externe Schriftart gemäß der SVG-Spezifikation verlinken können . Das scheint die beste Lösung zu sein, wenn Sie mehrere SVG-Dokumente haben, die auf diese Schriftart verweisen.
data:application/font-woff2;charset=utf-8;base64,
Ein <defs>
Abschnitt wie
<defs>
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>
funktioniert.
Sie können Google Web Fonts direkt mit Nano in Ihr SVG einbetten . Es scannt automatisch Ihr SVG und bettet selektiv nur die erforderlichen Schriftarten ein, um sicherzustellen, dass Ihre Ubuntu-Schriftarten in allen modernen Browsern gleich aussehen. In meinem Fall musste Roboto in mein SVG eingebettet werden:
Haftungsausschluss: Ich bin beim Team hinter Nano, und auch wir standen zuvor vor dem gleichen Problem und haben uns daher entschieden, unseren eigenen Juckreiz zu kratzen, indem wir Nano gebaut haben. Hoffe, das ist hilfreich!
Bearbeiten: Hier ist eine kurze Erklärung, was hinter den Kulissen passiert:
Um Schriften in SVG einzubetten, muss man zunächst wissen, welche Schriftfamilien verwendet werden. Dann müssen Sie diese Schriftartdateien finden und herunterladen. Nach dem Herunterladen müssen Sie normale, fette, kursive und fette Kursivschrift in die Base-64-Codierung konvertieren. Wenn Sie es manuell tun, ist es eine enorme Menge an Arbeit, bei einer großen Anzahl von Dateien zu wissen, welche Datei Fett verwendet und welche nicht. Dann müssen Sie alle 4 Base-64-codierten Strings in Ihr SVG kopieren.
Aus diesem Grund bauen wir Nano und stellen sicher, dass SVG automatisch gescannt und nur die verwendeten Schriftarten eingefügt werden. Wenn beispielsweise keine Fettschrift verwendet wird oder kein Text vorhanden ist, werden keine Schriftarten eingebettet. Alles, was Sie tun müssen, ist, Ihr SVG in Nano zu ziehen und abzulegen, und es funktioniert wie ein Zauber! Hier erfahren Sie mehr: https://vecta.io/blog/making-svg-easier-to-use
UPDATE zu meiner Antwort. Ich bevorzuge jetzt eine andere Antwort auf dieser Seite, die Nano verwenden soll: https://graphicdesign.stackexchange.com/a/121950/45239
Angenommen, Sie haben eine Webschriftart auf Ihr System heruntergeladen und installiert und eine SVG-Datei erstellt (vielleicht mit vielen der unten beschriebenen Schritte, aber ohne „Schriftart: In Konturen konvertieren“), können Sie die SVG-Datei auf Nano hochladen und sehen Sie sich die Option "Schriftart einbetten: Ja" an und klicken Sie auf Herunterladen.
Meine bisherige Antwort:
Wenn Sie bereit sind, auf auswählbaren Text und SEO zu verzichten:
Wählen Sie diese Einstellungen:
Laden Sie optional das resultierende SVG auf https://vecta.io/nano hoch (es konnte meine Dateigröße um 8,2% reduzieren)
Neben Nano können Sie sich auch svg-buddy ansehen . Das ist ein Kommandozeilentool, das die verwendeten Schriftarten in Ihrem SVG automatisch erkennt, sie von Google Fonts herunterlädt und die base64-codierten Schriftarten in das defs
Tag des SVG einbettet. Dadurch wird sichergestellt, dass das SVG unabhängig von den installierten Schriftarten auf dem System des Benutzers auf allen Geräten gleich angezeigt wird. Darüber hinaus svg-buddy
kann auch eine grundlegende Optimierung angewendet werden, um die Dateigröße zu reduzieren. Es ist völlig kostenlos und funktioniert offline.
Haftungsausschluss: Ich bin der Autor dieses Open-Source-Tools. Ich hoffe, dass es für andere nützlich ist.
Dies ist möglicherweise zu stark vereinfacht, aber haben Sie darüber nachgedacht, die Schriftart als ZIP-Datei von Google herunterzuladen und sie dann nach Bedarf in Ihre SVG-Dateiausgabe von Illustrator konvertieren zu lassen?
Dies ist nur theoretisch, da ich das noch nicht ausprobiert habe, aber theoretisch scheint es zu funktionieren.
Fügen Sie das folgende After <desc>
-Tag hinzu
<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>
@import
ist in diesen beiden Eimern.Ich konnte das Problem beheben, indem ich, anstatt das SVG als Quelle eines Bildes in der HTML-Datei zu verwenden, das SVG inline in das HTML selbst eingefügt habe.
<img src="/img/my_svg.svg">
Ich musste das eigentliche SVG in die HTML-Datei selbst einfügen. Dann konnte Safari die Schriftarten lesen, die ich zuvor importiert hatte.
<svg class="coupon" height="220.254" viewBox="0 0 434.842 220.254" width="434.842" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<linearGradient id="a" gradientUnits="objectBoundingBox" x1=".079" x2=".933" y1=".088" y2=".879">
<stop offset="0" stop-color="#00b2dc"/>
<stop offset="1" stop-color="#00dac4"/>
</linearGradient>
<path d="m281.406 302.474a6.213 6.213 0 0 1 -6.167-6.914l.726-6.415a15.2 15.2 0 0 0 .1-1.7 14.846 14.846 0 0 0 -14.817-14.845c-.461 0-.915.026-1.364.066l-6.275.565a6.21 6.21 0 0 1 -6.763-6.189v-149.4a6.209 6.209 0 0 1 6.762-6.189l6.275.563c.451.04.906.068 1.366.068a14.846 14.846 0 0 0 14.819-14.839 15.225 15.225 0 0 0 -.1-1.7l-.726-6.415a6.212 6.212 0 0 1 6.167-6.912h365.712a6.211 6.211 0 0 1 6.167 6.912l-.724 6.415a15.316 15.316 0 0 0 -.1 1.7 14.844 14.844 0 0 0 14.818 14.839c.461 0 .917-.028 1.366-.068l6.277-.563a6.209 6.209 0 0 1 6.761 6.189v149.4a6.211 6.211 0 0 1 -6.763 6.189l-6.277-.565c-.449-.04-.9-.066-1.364-.066a14.844 14.844 0 0 0 -14.818 14.837 15.316 15.316 0 0 0 .1 1.7l.724 6.415a6.212 6.212 0 0 1 -6.167 6.914z" fill="#fff" transform="translate(-246.845 -82.22)"/>
<path d="m661.315 118.088a26.8 26.8 0 0 1 -26.785-26.82 27.426 27.426 0 0 1 .176-3.048h-352.816a27.448 27.448 0 0 1 .176 3.048 26.8 26.8 0 0 1 -26.785 26.821c-.822 0-1.634-.042-2.435-.114v136.777c.8-.074 1.614-.116 2.435-.116a26.8 26.8 0 0 1 26.785 26.823 27.477 27.477 0 0 1 -.176 3.048h352.816a27.455 27.455 0 0 1 -.176-3.048 26.8 26.8 0 0 1 26.785-26.823c.822 0 1.634.042 2.435.116v-136.777c-.802.072-1.614.113-2.435.113z" fill="url(#a)" transform="translate(-240.878 -76.237)"/>
<g fill="#fff">
<path d="m621.645 274.026h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.975v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.968zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-17.291-.859a33.59 33.59 0 0 0 -2.734-9.267l1.811-.835a35.522 35.522 0 0 1 2.888 9.824zm341.224-7.679-1.851-.741a35.833 35.833 0 0 1 5.1-8.866l1.568 1.232a33.823 33.823 0 0 0 -4.823 8.375zm-349.198-9.708a34.131 34.131 0 0 0 -7.31-6.315l1.075-1.682a36.025 36.025 0 0 1 7.739 6.687zm360.994-5.343-1.159-1.628a35.748 35.748 0 0 1 9.083-4.7l.652 1.891a33.621 33.621 0 0 0 -8.577 4.437zm-377.09-4.959a33.483 33.483 0 0 0 -3.979-.891l-.84-.138v-6.629h1.994v4.939c1.137.21 2.27.479 3.377.8zm392.125-5.88h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.764h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.99h1.994zm394.949-8.209h-1.995v-9.981h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-6.679l.84-.134a33.762 33.762 0 0 0 3.935-.881l.551 1.919c-1.1.316-2.214.577-3.331.787zm391.395-5.313a35.649 35.649 0 0 1 -9.522-3.731l.985-1.736a33.641 33.641 0 0 0 8.987 3.519zm-378.745-4.673-1.073-1.686a33.95 33.95 0 0 0 7.317-6.302l1.5 1.314a36.072 36.072 0 0 1 -7.745 6.673zm361.147-5.331a35.941 35.941 0 0 1 -5.99-8.292l1.765-.929a33.98 33.98 0 0 0 5.659 7.833zm-347.837-9.934-1.811-.837a33.663 33.663 0 0 0 2.737-9.265l1.975.286a35.635 35.635 0 0 1 -2.901 9.816zm338.45-8.013c-.064-.33-.126-.659-.182-.993h-7.3v-2h9.017l.122.857c.082.587.181 1.166.3 1.742zm-17.45-.993h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.963zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.975v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.98v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.968zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973z" transform="translate(-237.397 -72.746)"/>
<text font-family="Poppins-Medium, Poppins" font-size="28" font-weight="500" letter-spacing=".05em" transform="translate(78 70.476)">
<tspan x="0" y="0">This is</tspan>
</text>
<text font-family="Poppins-Bold, Poppins" font-size="112" font-weight="700" transform="translate(79 172.476)">
<tspan x="0" y="0">a test</tspan>
</text>
</g>
</svg>
Beachten Sie, dass Sie in diesem Fall Ihre Schriftarten importieren MÜSSEN !
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
Hoffe, das hilft jemandem da draußen!
Viel Glück 😊
Stieß auf das gleiche Problem und erstellte ein ähnliches Tool wie nano und svg-buddy. Im Vergleich zu Nano ist es ein kostenloses Tool. Und im Vergleich zu svg-buddy ist es in NodeJS statt in Java geschrieben, sodass es für jeden, der Node bereits auf seinem Computer hat, einfach zu installieren (oder auch beizutragen!) ist.
Das Tool ist für Google Fonts optimiert. Es leitet ab, welche Buchstaben verwendet werden, indem es das SVG nach Schriftdefinitionen durchsucht. Die Buchstaben werden dann an Google Fonts übergeben, damit die am besten optimierten Schriftartdateien zurückgegeben werden können. Diese Optimierung führt zu einer dramatisch kleineren Dateigröße.
Micky