icons 1987176
Bild von aalmeidah auf Pixabay

SVG Icons mit Inkscape für die Intergration in Iconfont vorbereiten

Wer kein Grafiker ist, aber doch dann und wann bildliche Elemente bearbeiten muss, findet in Inkscape einen frei zugänglichen Helfer für SVG.

Wenn Kunden ihre Iconsammlungen selbst zusammenstellen, und dafür unterschiedliche Quellen wählen, kann Inkscape sehr nützlich sein, sowohl wenn es nur darum geht, Icons für SVG Sprite in eine einheitliche Form zu bringen als auch um sie auf die Verwendung in einem benutzerdefinierten Icon Font vorzubereiten.

In einem Fall sammelte sich eine recht unterschiedliche Mischung von Icons verschiedener Größe, Ausgangsfarbe und Ausführung an. Die wenigen mehrfarbigen Icons mussten vorab auf eine Farbe gebracht, manche auch vereinfacht werden.

CSS kann später dann Rahmen oder einen andersfarbiger Hintergrund liefern.

Vorab eine Größe festlegen, die alle Icons bekommen sollen.

Die Arbeitsschritte in Inkscape

Schritt 1: alles auswählen und auf die gewünschte Größe ziehen (oder verkleinern).

Schritt 2: in Datei, Dokumenteneinstellungen “Ändern der Seitengröße auf Inhalt” aufklappen und “Seitengröße auf Zeichnungs- / Auswahlgröße” aktivieren. Darauf achten, ob das Dropdownfeld oben rechts auf “px” gestellt ist. Wenn nicht, einstellen.

Schritt 3: Objekt, Gruppierung aufheben (mithin mehrfach ausführen, bis alle Gruppen aufgelöst sind).

Schritt 4: “Pfad” zuerst “vereinigen”, dann “kombinieren”

Schritt 5: Unter “Datei” das “Dokument säubern”.

Schritt 6: die Datei speichern als “normales SVG”

Ergebnis im Code-Editor prüfen

Der XML-Code der SVG-Datei sieht im Code-Editor dann etwa so aus:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg4"
   viewBox="0 0 560 560"
   height="560"
   width="560"
   version="1.1">
  <metadata
     id="metadata10">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs8" />
  <path
     d="M 274.11426,5.8287958e-7 C 272.48653,9.5058288e-4 270.85706,1.1631706 268.63574,3.4837006 257.39839,15.219701 249.34882,29.090121 243.49495,44.278341 c -2.30728,5.9747 -0.85044,11.78073 2.44235,17.01621 6.51091,10.34139 16.38869,14.18311 25.23669,14.54892 10.54292,0.12192 17.77877,-2.00531 24.2001,-6.82928 8.3029,-6.2338 12.58101,-16.43005 9.40021,-24.75194 C 298.9951,29.066411 290.78229,15.265431 279.58228,3.4837006 277.36842,1.1593606 275.74199,-9.4941712e-4 274.11426,5.8287958e-7 Z M 370.78067,8.5751506 c -29.54381,0.24174 -54.90175,23.7995404 -57.10673,54.1139504 -0.93324,12.97057 -0.3948,26.0557 -0.54391,39.079609 -0.0301,1.9433 -0.17913,3.87882 -0.29955,6.3251 a 162.28775,165.63772 0 0 0 -70.14877,-1.85851 c -45.55404,8.93156 -82.3054,32.55536 -109.25256,71.04031 -29.70982,42.37156 -39.296443,89.68133 -28.37272,140.44337 11.30452,52.54533 41.14821,91.60949 87.26227,117.61163 19.37595,10.9282 40.24535,17.1849 62.16746,20.01985 1.64264,0.20593 4.03957,1.44089 4.48004,2.75156 2.8896,8.59619 5.33141,17.3218 7.89985,25.91049 -4.18878,2.00426 -8.89216,3.6497 -12.95401,6.31705 -9.4976,6.23372 -13.6647,16.75009 -10.24498,25.83406 a 119.57849,122.04685 0 0 0 23.40789,38.72159 c 6.13759,6.88177 8.72074,6.88944 14.35058,-0.40362 6.73492,-8.73341 12.83524,-17.97772 19.61496,-27.57993 0.61243,0.40371 1.54556,0.95285 2.40425,1.57021 16.82982,12.58196 35.64617,19.74486 56.40252,22.29003 61.68949,7.55218 121.67654,-42.6676 125.6264,-106.25542 2.82987,-45.36651 -14.0449,-81.60382 -51.06458,-107.51453 -3.748,-2.59108 -5.1514,-5.26562 -5.1514,-9.90668 0.0607,-84.16392 0.0907,-168.3276 0.0907,-252.491529 0,-3.53605 -0.0602,-7.08092 -0.27722,-10.60932 -1.84429,-30.58221 -26.73794,-54.8919804 -56.88079,-55.4025704 -0.47098,-0.008 -0.94076,-0.0105 -1.4097,-0.007 z m 0.47559,23.1173704 c 18.86511,-0.24968 35.46333,15.73573 35.52765,38.8235 0.098,45.061689 0,90.115489 0,135.169549 h 0.004 c 0,45.06169 0.0769,90.09304 -0.11561,135.1776 -0.0223,4.67156 1.12718,7.20118 5.34583,9.42663 28.27627,14.95195 45.78583,38.53057 50.2658,70.71313 7.28746,52.75868 -27.65716,97.23424 -74.55524,105.61714 -49.56366,8.83249 -94.09413,-21.64384 -106.19011,-71.47611 -9.07196,-37.3799 8.0634,-80.8786 40.81961,-99.71712 10.5653,-6.07374 13.88769,-12.52082 13.79879,-24.82837 -0.64996,-86.38922 -0.31291,-172.77875 -0.37312,-259.167949 0,-14.86815 4.94929,-27.1077 17.91885,-34.68275 5.79074,-3.38113 11.77858,-4.97882 17.55362,-5.05525 z m 101.40527,46.36748 v 22.405339 h 87.15191 V 78.060001 Z m -386.768111,2.44181 c -6.246793,0.0142 -7.488691,1.80191 -7.313899,8.75349 0.403201,16.003639 4.240488,31.246079 10.385547,45.900849 2.717862,6.53863 8.310987,9.65484 14.933913,10.79034 19.48051,3.32267 39.21512,-14.11298 39.25225,-37.1125 -0.24639,-5.92134 -2.48591,-13.702989 -10.5051,-17.460039 A 116.71129,119.12046 0 0 0 87.211152,80.521921 c -0.461998,-0.0138 -0.901281,-0.0211 -1.317733,-0.0201 z M 273.44948,126.27795 c 11.2591,0.10782 22.79165,1.46342 34.56463,4.02409 3.73335,0.82304 5.22759,2.28582 5.22759,6.56109 -0.1099,63.86216 -0.12769,127.72962 -0.0525,191.60195 0,3.2236 -0.59023,5.50197 -3.47236,7.43 -33.11462,22.17648 -50.47481,53.66509 -52.8566,93.90291 a 17.359973,17.71832 0 0 1 -0.52158,2.28626 139.32031,142.19619 0 0 1 -53.60415,-17.19991 c -40.83515,-23.2205 -67.45272,-57.98725 -76.0543,-105.01507 -10.99092,-60.21181 7.39871,-111.01118 53.75918,-149.71714 27.92156,-23.29103 59.23284,-34.19761 93.01012,-33.87418 z m 199.40649,2.22458 v 22.56491 h 50.02669 v -22.56491 z m -0.0447,50.31246 v 22.51127 h 87.18869 v -22.51127 z m 0.0447,50.3044 v 22.78617 h 50.02669 V 229.11939 Z M 48.940304,247.69643 c -1.904585,0.0159 -3.793321,0.35851 -5.611219,1.062 a 119.40674,121.87156 0 0 0 -40.4543747,25.9105 c -3.8825802,3.77991 -3.80024323,7.10308 0.052552,10.83726 a 114.87449,117.24575 0 0 0 40.5437127,25.68925 c 3.576526,1.30324 8.415341,0.75397 12.148663,-0.4881 11.14025,-3.71132 18.538959,-16.54422 18.538959,-30.7646 A 35.160476,35.886265 0 0 0 67.506854,258.49749 C 62.752699,251.7519 55.742395,247.63954 48.940304,247.69643 Z m 423.834206,31.88828 v 22.57296 h 87.12826 v -22.57296 z m -112.71966,93.388 a 14.522644,14.822423 0 0 0 -2.87196,0.40898 c -26.7302,6.46995 -45.48659,29.59226 -46.63709,57.46087 -0.32067,7.91736 2.68132,13.66315 8.8484,16.32296 5.60002,2.43115 10.73639,1.13619 15.21638,-2.82665 4.22599,-3.71893 4.74149,-8.90981 5.33138,-14.14531 1.51572,-13.2678 8.75057,-22.04663 20.80919,-26.84779 1.85921,-0.73919 3.86756,-1.11984 5.68217,-1.94299 6.69744,-3.04837 10.25897,-11.20999 8.01941,-18.11441 a 14.522644,14.822423 0 0 0 -14.39788,-10.31566 z m -251.48796,40.60692 c -9.016824,0.0474 -16.562846,4.16196 -19.766047,11.5922 -6.070387,14.07562 -9.101232,28.9664 -10.265995,42.43995 0,11.06544 1.76225,13.49736 11.200102,11.82821 a 386.35461,394.32981 0 0 0 40.73816,-9.80879 c 8.47465,-2.49197 11.99847,-9.9371 12.60323,-18.49524 1.18722,-16.81903 -11.81916,-33.74473 -28.0666,-36.93012 -2.20219,-0.43154 -4.36204,-0.63715 -6.44285,-0.62621 z"
     style="stroke-width:0.75433248"
     id="path4" />
</svg>

Im Code-Editor sollte nun das defs-Tag leer sein, und es gibt nur noch einen Pfad.

Über Gabriele Lässer

WordPress Sorgen? - Nicht mit mir! Ich freue mich auf spannende Herausforderungen

Kommentar schreiben

E-Mail-Adresse wird nicht veröffentlicht.

Overlay background for modal content