Google hat vor Kurzem sein neues Logo veröffentlicht und von dieser Neuerung ist auch das Google-Plus-Logo betroffen, das ich hier auf der Website nutze. Im Rahmen des Wechsels habe ich auch gleich den Icon Font durch SVG ersetzt. Hier zeige ich euch kurz, wie ich dabei vorgegangen bin.
Die SVG-Versionen vom RSS-, Facebook- und Twitter-Icon habe ich von Fontastic. Das neue Icon von Google Plus gibt es da noch nicht – die SVG-Pfade habe ich mir aus dem Teilen-Dialog von der Google-Seite geholt. Die Pfade habe ich als SVG gespeichert, in Illustrator auf dieselbe Größe gebracht wie die Fontastic-Icons und bei Fontastic als neues Icon importiert.
Wenn ihr das dann in Fontastic als SVG-Sprite speichert, bekommt ihr ungefähr folgenden Code (ich habe ihn weiter angepasst nach einer Vorlage aus dem SVG-Kapitel des Smashing Book 5 von Sara Soueidan):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-twitter" viewBox="0 0 512 512">
<title>Twitter</title>
<desc>Icon, das zu dem Twitter-Account verlinkt</desc>
<path d="m481 117c-13 18-28 34-46 47c0 3 0 7 0 12c0 25-3 50-11 74c-7 25-18 49-33 71c-14 23-32 43-52 61c-21 17-45 31-74 41c-29 11-60 16-92 16c-52 0-99-14-142-42c7 1 14 2 22 2c43 0 81-14 115-40c-20 0-38-6-54-18c-16-12-27-27-33-46c7 1 13 2 18 2c8 0 16-1 24-4c-21-4-39-15-53-31c-14-17-21-37-21-59l0-1c13 7 27 11 42 11c-13-8-23-19-30-32c-8-14-11-29-11-44c0-17 4-33 12-47c23 28 51 51 84 68c33 17 69 27 107 29c-2-8-3-15-3-22c0-25 9-47 27-65c18-18 40-27 66-27c26 0 49 10 67 29c21-4 40-11 59-22c-7 22-21 39-41 51c18-2 35-7 53-14z"/>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 512 512">
<title>Facebook</title>
<desc>Icon, das zu dem Facebook-Account verlinkt</desc>
<path d="m292 159l74 0l-9 81l-65 0l0 235l-97 0l0-235l-49 0l0-81l49 0l0-49c0-35 8-61 24-79c17-18 44-26 81-26l65 0l0 81l-40 0c-8 0-14 0-18 2c-5 1-8 3-10 6c-2 4-3 7-4 10c0 3-1 8-1 14z"/>
</symbol>
<symbol id="icon-rss" viewBox="0 0 512 512">
<title>RSS</title>
<desc>Icon, das zum RSS-Feed verlinkt</desc>
<path d="m165 384c0 15-6 28-16 39c-11 11-24 16-39 16c-16 0-28-5-39-16c-11-11-16-24-16-39c0-15 5-28 16-39c11-11 23-16 39-16c15 0 28 5 39 16c10 11 16 24 16 39z m146 35c0 5-1 10-5 14c-3 4-8 6-13 6l-39 0c-5 0-9-2-12-5c-4-3-6-7-6-12c-4-43-22-81-53-112c-31-31-68-48-112-52c-4-1-8-3-11-6c-4-3-5-8-5-12l0-39c0-5 2-10 6-13c3-4 7-5 12-5l2 0c30 2 59 10 87 23c28 13 52 30 74 52c22 21 39 46 52 74c13 28 20 57 23 87z m146 1c1 5-1 9-5 13c-3 4-8 6-13 6l-41 0c-5 0-9-2-13-5c-3-3-5-8-5-12c-3-41-12-80-29-117c-17-37-39-69-66-96c-27-27-59-49-96-66c-37-17-76-27-117-29c-5 0-9-2-12-6c-3-3-5-8-5-12l0-41c0-5 2-10 6-13c3-4 7-5 12-5l1 0c50 2 98 13 143 34c46 20 86 48 122 84c35 35 63 76 84 121c20 46 32 94 34 144z"/>
</symbol>
<symbol id="icon-google-plus" viewBox="0 0 512 512">
<title>Google Plus</title>
<desc>Icon, das zum Google-Plus-Profil verlinkt</desc>
<path d="m504 236l-45 0 0-45-45 0 0 45-45 0 0 45 45 0 0 45 45 0 0-45 45 0m-338-45l0 54 90 0c-4 22-27 67-90 67-54 0-97-45-97-98 0-54 43-99 97-99 32 0 52 13 63 25l43-41c-27-27-63-42-106-42-88 0-158 69-158 157 0 87 70 156 158 156 90 0 151-62 151-152 0-11 0-18-2-27z"/>
</symbol>
</svg>Code-Sprache: HTML, XML (xml)Das könnt ihr jetzt beispielsweise in einer Datei social-media.svg speichern. Zugreifen könnt ihr auf ein Icon so:
<svg class="icon-google-plus"><use xlink:href="social-media.svg#icon-google-plus"></use></svg>Code-Sprache: HTML, XML (xml)Ihr gebt in dem href-Attribut den Pfad zu der Datei sowie die ID des Icons an. In die CSS-Datei kommt dann noch dieser Schnipsel (von Fontastic):
[class^="icon-"], [class*=" icon-"] {
height: 32px;
width: 32px;
display: inline-block;
fill: currentColor;
}Code-Sprache: CSS (css)Als Fallback für den IE, der mit dem externen Einbinden von SVG-Dateien nicht wirklich zurechtkommt, nutze ich svg4everybody.
Einen umfangreichen Artikel über Vor- und Nachteile von SVG im Gegensatz zu Icon Fonts hat Sven Wolfermann geschrieben.