ComputerBase Menü
Aktuelles

Webfonts in SVG für iOS definieren

S

safeload

Ensign
Registriert
Juni 2010
Beiträge
244
Hallo, in meinem mit IMG eingebundenem SVG wird meine Webfont-Schrift 'Lato' in iOS nicht angezeigt.
Android & Win kein Problem.

Deshalb habe ich nun in der SVG-Datei versucht den Webfont zu importieren. Leider ohne Erfolg.

Wo liegt der Fehler?

SVG
Code: 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 434.73 43.92"><defs><style>@import url('https://fonts.googleapis.com/css?family=Lato:regular,bold');.cls-1{fill:#a7b7a9;}.cls-2{font-size:20px;fill:#202220;font-family:Lato-Regular, Lato;letter-spacing:0.01em;}.cls-3{letter-spacing:-0.06em;}.cls-4,.cls-5{letter-spacing:0.01em;}.cls-5,.cls-6{fill:#9fa8a1;}.cls-7{letter-spacing:-0.03em;}.cls-8{font-size:15px;letter-spacing:0.01em;}.cls-9{letter-spacing:0em;}.cls-10{letter-spacing:0.01em;}</style></defs><title>logo_6</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><polygon class="cls-1" points="415.84 43.92 394.73 43.92 413.62 1.92 434.73 1.92 415.84 43.92"/><text class="cls-2" transform="translate(0 17.17)">Dr. Frenken<tspan class="cls-5" x="106.12" y="0">•</tspan><tspan x="117.92" y="0" xml:space="preserve"> Müller </tspan><tspan class="cls-5" x="200.62" y="0">•</tspan><tspan x="212.42" y="0" xml:space="preserve"> Stamer</tspan><tspan class="cls-6" x="289.98" y="0">•</tspan><tspan class="cls-4" x="301.78" y="0"> </tspan><tspan class="cls-7" x="305.84" y="0">A</tspan><tspan class="cls-4" x="318.82" y="0">ndersson</tspan><tspan class="cls-8"><tspan x="139.84" y="24">Rechtsanwälte</tspan></tspan></text></g></g></svg>
 
Zuletzt bearbeitet:
Hi, schau mal hier defs
HTML: 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 434.73 43.92">
<defs></defs>
<style>@import url('https://fonts.googleapis.com/css?family=Lato:regular,bold');.cls-1{fill:#a7b7a9;}.cls-2{font-size:20px;fill:#202220;font-family:Lato-Regular, Lato;letter-spacing:0.01em;}.cls-3{letter-spacing:-0.06em;}.cls-4,.cls-5{letter-spacing:0.01em;}.cls-5,.cls-6{fill:#9fa8a1;}.cls-7{letter-spacing:-0.03em;}.cls-8{font-size:15px;letter-spacing:0.01em;}.cls-9{letter-spacing:0em;}.cls-10{letter-spacing:0.01em;}</style>
<title>logo_6</title>
<g id="Ebene_2" data-name="Ebene 2">
<g id="Ebene_1-2" data-name="Ebene 1">
<polygon class="cls-1" points="415.84 43.92 394.73 43.92 413.62 1.92 434.73 1.92 415.84 43.92"/>
<text class="cls-2" transform="translate(0 17.17)">
Dr. Frenken<tspan class="cls-5" x="106.12" y="0">•</tspan>
<tspan x="117.92" y="0" xml:space="preserve"> Müller </tspan><tspan class="cls-5" x="200.62" y="0">•</tspan>
<tspan x="212.42" y="0" xml:space="preserve"> Stamer</tspan><tspan class="cls-6" x="289.98" y="0">•</tspan>
<tspan class="cls-4" x="301.78" y="0"> </tspan><tspan class="cls-7" x="305.84" y="0">A</tspan>
<tspan class="cls-4" x="318.82" y="0">ndersson</tspan><tspan class="cls-8"><tspan x="139.84" y="24">Rechtsanwälte</tspan>
</tspan>
</text>
</g>
</g>
</svg>
So müsste es funktionieren. Gruß
Ergänzung ()

Und so sieht der saubere Code dafür aus.
HTML: 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 434.73 43.92">
<defs>
<g id="dot">
   <circle style="fill: inherit;" r="4"/>
</g>
</defs>
<style type="text/css">
/*<![CDATA[*/
@charset UTF-8;
@import url('https://fonts.googleapis.com/css?family=Lato');
svg {
    /* background-color: #f31313; */
}
#Ebene_1{
	display: block;
}
#dot,
#polygon {
	fill:#a7b7a9;
}
text.cls,
text {
	fill:#202220;
	font-family:'Lato', sans-serif;
    font-weight: 900;
	font-size:20px;
	letter-spacing:.01em;
}
/*]]>*/
</style>
<title>Rechtsanwälte</title>
<g id="Ebene_1" data-name="Ebene 1">
	<g id="Ebene_2" data-name="Ebene 2">
		<text x="0" y="17">Dr. Frenken</text>
		  <use x="116" y="10" href="#dot" />
		<text x="128" y="17">Müller</text>
		  <use x="202" y="10" href="#dot" />
		<text x="215" y="17">Stamer</text>
		  <use x="294" y="10" href="#dot" />
		<text x="308" y="17">Andersson</text>
		<polygon id="polygon" points="415.84 43.92 394.73 43.92 413.62 1.92 434.73 1.92 415.84 43.92" />
	</g>
		<text x="150" y="24"  class="cls" transform="translate(0 17.17)">Rechtsanwälte</text>
</g>
</svg>
LG
 
Wenn SVG Objekte per img-Tag eingebunden werden, dann darf die Schriftart nicht per import nachgeladen werden. Diese werden ansonsten vom Browser ignoriert. Es gibt u.a. diese zwei Möglichkeiten das Problem zu lösen.

1. Möglichkeit (SVG als object einbiden)
Code: 
<object data='test.svg' type="image/svg+xml"><img src='fallback.png' /></object>

2. Möglichkeit (Schriftart base64 codiert als data URI in die SVG einbinden)
Code: 
@font-face {
    font-family: "MyB64Font";
    src: url("data:font/opentype;base64,[base-encoded font here]");
}
 
Vielen Dank für die Beiträge.

Das ganze SVG-Thema gestaltet sich doch komplizierter als ich es vermutet habe.
So soll das ganze auch noch zusätzlich zu iOS auf Win & Android Cross-Browser incl. IE 10/11 und full responsive auf available width funktionieren.

Ich hatte das Ganze zunächst so realisiert, daß ich den SVG Code inline (site css fontface greift dann bei svg) als .js file mit jQuery einbinde und den unerwünschten Space, den IE bei der Einbindung ohne festen Höhenangabe erzeugt, durch einen CSS-Hack ('padding-bottom-hack') vermeide, der über eine MediaQuery (mit IE-hack) aktiviert wird. Da aber nicht alle Browser letter-spacing im SVG unterstützen hab ich dann letztendlich den font des SVG doch in Pfade konvertiert.

@gabischatz: Ich hab den code von dir mal ausprobiert, es wird mir jedoch nichts angezeigt (weder als img eingebunden, noch direkt im Browser). Da du dir aber die ganze Mühe gemacht hast, bin ich mir sicher das du es auch getestet hast und es eher an mir liegt ...

@pfd: object data hab ich bisher noch nicht ausprobiert. gibt es da in der Kompatibilität und Flexibilität Nachteile ggü. inline-Einbindung (meine da mal was gelesen zu haben ... )? Besonders die Fallback option gefällt mir hier sehr gut.
 
OK Danke. Du kennst nicht zufällig auch eine Methode um SVG Typo in FF mit letter-spacing darzustellen?
Wenn ich das SVG inline einbinde, reagiert es zwar generell auf das site-css, nur eben nicht beim letter-spacing ...
 
Zuletzt bearbeitet:
So?
Code: 
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example text01 - 'Hello, out there' in blue</desc>

  <text x="250" y="150" 
        font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
  </text>

  <text x="250" y="200" textLength="600"
        font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>
Ergänzung ()

Das gefällt mir aber noch besser!
Code: 
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

    <text x="250" y="200" dx="0 20 20 20 20 0 20 20 20 20 20"
        font-family="Verdana" font-size="55" fill="blue" >
         Hello, out there
    </text>
</svg>
 
Zuletzt bearbeitet:
Danke, der Ansatz gefält mir. Hab auch schon etwas damit rumexperimentiert. Scheitert aber noch etwas an meinem mangelndem Viewportverständnis (Hab es vorher immer von Illustrator geliefert bekommen). In Zukunft aber sicherlich die Methode meiner Wahl für pixelgenaues letter-spacing.

Hast Du eine Idee, warum dein Code bei mir nicht angezeigt wird?

Code: 
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 434.73 43.92">
    <defs>
    <g id="dot">
       <circle style="fill: inherit;" r="4"/>
    </g>
    </defs>
    <style type="text/css">
    /*<![CDATA[*/
    @charset UTF-8;
    @import url('https://fonts.googleapis.com/css?family=Lato');
    svg {
        /* background-color: #f31313; */
    }
    #Ebene_1{
    	display: block;
    }
    #dot,
    #polygon {
    	fill:#a7b7a9;
    }
    text.cls,
    text {
    	fill:#202220;
    	font-family:'Lato', sans-serif;
        font-weight: 900;
    	font-size:20px;
    	letter-spacing:.01em;
    }
    /*]]>*/
    </style>
    <title>Rechtsanwälte</title>
    <g id="Ebene_1" data-name="Ebene 1">
    	<g id="Ebene_2" data-name="Ebene 2">
    		<text x="0" y="17">Dr. Frenken</text>
    		  <use x="116" y="10" href="#dot" />
    		<text x="128" y="17">Müller</text>
    		  <use x="202" y="10" href="#dot" />
    		<text x="215" y="17">Stamer</text>
    		  <use x="294" y="10" href="#dot" />
    		<text x="308" y="17">Andersson</text>
    		<polygon id="polygon" points="415.84 43.92 394.73 43.92 413.62 1.92 434.73 1.92 415.84 43.92" />
    	</g>
    		<text x="150" y="24"  class="cls" transform="translate(0 17.17)">Rechtsanwälte</text>
    </g>
    </svg>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

P
JavaScript Probleme bei selbstgeschriebenem carousel
Antworten
3
Aufrufe
1.230
tollertyp
T
R
CSS CSS Javascript Wasserzeichen
2
Antworten
25
Aufrufe
5.772
floq0r
floq0r
R
Probleme beim Erstellen von einer SVG-Grafik
Antworten
2
Aufrufe
1.205
rony12
R
D
[html & CSS] Professionelles Layout für eBay
Antworten
2
Aufrufe
1.774
danny06
D
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz