SVG (Superb Vector Goodness) Inkscape Icon Creation and Code cleanup ✤✤
Okay, ein bisschen geschummelt habe ich. SVG steht für Scalable Vector Graphics aber meine Definition stimmt eher :D
Um Vektoren geht es, nicht wegrennen Mathefeinde, das hier ist nämlich richtig cool! Mathekenntnisse sind keine vorhanden, dafür gibt es Inkscape.
SVG unterscheiden sich von herkömmlichen Bild-Formaten dadurch, dass sie nicht auf Pixeln basieren. Man kann sie so gross aufblasen wie man will, ohne dass sie je verpixelt werden. Ausserdem sind SVGs der Schlüssel zu eigenen Icon-Fonts, doch heute möchte ich euch erst einmal erklären, wie der Arbeitsverlauf ist, und wie ihr den von Inkscape generierten Code nachher aufräumt.
Okay, I tricked a little bit. SVG does not really stand for superb vector goodness but scalable vector graphics, which tells you something about it, but my definition is more attractive. It screams Check us out, which you really should, because these graphics are great. Even if it says vector, you don't have to do the maths, my new buddy inkscape does that. SVG are different from usual images because they are not pixel-based. They are made out of vectors, so out of lines. What that means is that you can blow them up, scale like crazy and they'll still look the same, just bigger. Also, SVG is the key to creating an icon-font, but today I want to show you the workflow and how to clean up the code inkscape puts out.
Before you can start you need inkscape. Inkscape is free and relatively easy. Comparing to gimp I understood and established my own workflow a lot faster.
Inkscape
Für dieses Tutorial habe ich den Prozess meiner KreaTief-Vektor-Erstellung bebildert um die wichtigsten Eckpunkte zu illustrieren.
Okay, I'm not gonna tell you what icon-creation all involves and how you create a concept, because this takes much to long and everyone has their own way of how to go about it. A lot of people will start with a sketch and create their paths based on this. When I created the logo for TwinSister.ch, I often used image in my background to act as a reference to form paths. It is quite the long process (but so much fun! With Inkscape even I, who am a total fail when it comes to drawing can create something decent).
For the sake of this tutorial I want to take you with me on the vector creation my logo, to illustrate the most important steps.
Da ich mein Logo schon hatte, als Bild-datei habe ich dieses über "file>open" geöffnet. Das Bild war dann sozusagen die schon relativ weit fortgeschrittene Skizze.
Open Inkscape, a new image will be created automatically.
Since I already had my logo as an image, I opened it (file>open). Regard the image as my pretty evolved sketch to use as a Guide.
Da ich gern alles innerhalb meiner Grenzen mache (auch wenn das nicht unbedingt getan werden muss) habe ich über die Document Properties, das Bild noch in die gewünschten Verhältnisse gebracht.
Since I like my work to be contained in a frame (you don't have to) I resized it to the size of my image.
Ich färbe meine Pfade immer rot, damit ich sie wirklich sehen kann.
Now you want to grab your pen tool and create your lines. Try to use as few nodes as possible, the lines end up smoother. If you misplace a node it's not bad, you can manipulate it after.
I always stroke my paths with red so I can really see them.
Um das Ganze dann zu bearbeiten selektiert ihr das Node Tool (zweites von oben) und markiert euren Pfad. Die Knotenpunkte lassen sich dann markieren und manipulieren.
To manipulate you select the node toll (second from the top) and select your path. The nodes will be visible and can be moved and manipulated.
Beim nachbearbeiten der Pfade lassen sich einzelnen Knotenpunkte auch löschen, hier kann man oft extrem reduzieren und die Linien verbessern.
Wenn ihr fertig seid, markiert ihr alle Teile eures Pfads.
When working on the paths, you'll see that your path benefits if you remove some nodes. It will often improve the all over line.
When you're happy with the look, select all of your paths
Im Fill and Stroke Reiter entfernt ihr die Linie und füllt eure Pfade mit schwarz (oder einer anderen beliebigen Farbe). Dann wählt ihr "Path>Combine". Eure Pfade wird zu einem einzigen zusammengesetzt. Und dann seid ihr ready zum Speichern. :)
In the fill and stroke panel remove the stroke and fill your paths with black (or any other color). Then select "Path>Combine". Your paths will be fused into one. And then you're ready to save :)
You can add the svgs using an image tag or if you do it inline, using the code inkscape created. The code gives you the possibility to add CSS-Styles so that's what I recommend, but first the code has to be cleaned up.
You get the code if you open the svg-file with an editor
Der Code zu meinem Logo sieht so aus:
That's what the Code of my logo looks like directly out of inkscape
Sehr viel Unnötigkeiten.
Zu Beginn einfach mal alles löschen, was wir nicht brauchen.
Also weg mit allem was nicht Pfad oder Dimensionsangaben ist.
A lot of unnessecary stuff.
First we just delete everything we don't need.
So remove everything that's not our path or other information of dimension
Schon besser. Sowas könnte man einbauen. Trotzdem mag ich kein inline-CSS und kopple dieses immer aus, dann noch ID anpassen und ich bin happy :D
A lot better. You could use something like that. I still dislike inline-CSS and just take it out. Then I adjust my ID and am happy. :D
You can fill SVGs with images too. Just follow the link to see an example. If you'd like a tutorial about how to make a svg responsive (and an explanation for the image in the background) let me know.
Responsive SVG with image background
edit
Um Vektoren geht es, nicht wegrennen Mathefeinde, das hier ist nämlich richtig cool! Mathekenntnisse sind keine vorhanden, dafür gibt es Inkscape.
SVG unterscheiden sich von herkömmlichen Bild-Formaten dadurch, dass sie nicht auf Pixeln basieren. Man kann sie so gross aufblasen wie man will, ohne dass sie je verpixelt werden. Ausserdem sind SVGs der Schlüssel zu eigenen Icon-Fonts, doch heute möchte ich euch erst einmal erklären, wie der Arbeitsverlauf ist, und wie ihr den von Inkscape generierten Code nachher aufräumt.
Okay, I tricked a little bit. SVG does not really stand for superb vector goodness but scalable vector graphics, which tells you something about it, but my definition is more attractive. It screams Check us out, which you really should, because these graphics are great. Even if it says vector, you don't have to do the maths, my new buddy inkscape does that. SVG are different from usual images because they are not pixel-based. They are made out of vectors, so out of lines. What that means is that you can blow them up, scale like crazy and they'll still look the same, just bigger. Also, SVG is the key to creating an icon-font, but today I want to show you the workflow and how to clean up the code inkscape puts out.
Inkscape
Okay, bevor es losgehen kann, braucht ihr Inkscape. Inkscape ist ein Gratisprogramm und relativ einfach zu bedienen. Im Vergleich zu Gimp arbeitet man sich meiner Ansicht nach viel schneller ein.Before you can start you need inkscape. Inkscape is free and relatively easy. Comparing to gimp I understood and established my own workflow a lot faster.
Inkscape
Icon Creation
Okay, ich werde nicht darauf eingehen, was ein Icon ausmacht und wie man das Konzept eines Logos/Icons kreirt, das würde zu lange dauern und der eigene kreative Prozess spielt da eine ganz grosse Rolle. Viele werden mit einer Skizze beginnen und anhand dieser ihre Pfade kreiren. Als ich das Logo für TwinSister entworfen habe, habe ich oft Bilder im Hintergrund platziert, die mir bei der ganzen Konzeption als Referenz gedient haben. Es ist ein zeitaufwändiger Prozess(aber es macht so viel Spass! Mit Inkscape krieg sogar ich Zeichnen-Sehr-Unbegabte Dinge hin, die ganz gut ausschauen).Für dieses Tutorial habe ich den Prozess meiner KreaTief-Vektor-Erstellung bebildert um die wichtigsten Eckpunkte zu illustrieren.
Okay, I'm not gonna tell you what icon-creation all involves and how you create a concept, because this takes much to long and everyone has their own way of how to go about it. A lot of people will start with a sketch and create their paths based on this. When I created the logo for TwinSister.ch, I often used image in my background to act as a reference to form paths. It is quite the long process (but so much fun! With Inkscape even I, who am a total fail when it comes to drawing can create something decent).
For the sake of this tutorial I want to take you with me on the vector creation my logo, to illustrate the most important steps.
1. New Image
Öffnet Inkscape, ein neues Bild wird direkt geöffnet.Da ich mein Logo schon hatte, als Bild-datei habe ich dieses über "file>open" geöffnet. Das Bild war dann sozusagen die schon relativ weit fortgeschrittene Skizze.
Open Inkscape, a new image will be created automatically.
Since I already had my logo as an image, I opened it (file>open). Regard the image as my pretty evolved sketch to use as a Guide.
Da ich gern alles innerhalb meiner Grenzen mache (auch wenn das nicht unbedingt getan werden muss) habe ich über die Document Properties, das Bild noch in die gewünschten Verhältnisse gebracht.
Since I like my work to be contained in a frame (you don't have to) I resized it to the size of my image.
2. Path Creation
Okay, dann geht es ans Pen Tool und ihr könnt eure Linien bilden. Versucht so wenige Knotenpunkte wie möglich zu setzen, die Linien werden durch weniger Eckpunkte meist flüssiger, wenn ihr einmal einen Punkt daneben setzt, ist das nicht so schlimm, sobald der Pfad fertig ist, könnt ihr die Punkte manipulieren.Ich färbe meine Pfade immer rot, damit ich sie wirklich sehen kann.
Now you want to grab your pen tool and create your lines. Try to use as few nodes as possible, the lines end up smoother. If you misplace a node it's not bad, you can manipulate it after.
I always stroke my paths with red so I can really see them.
Um das Ganze dann zu bearbeiten selektiert ihr das Node Tool (zweites von oben) und markiert euren Pfad. Die Knotenpunkte lassen sich dann markieren und manipulieren.
To manipulate you select the node toll (second from the top) and select your path. The nodes will be visible and can be moved and manipulated.
Beim nachbearbeiten der Pfade lassen sich einzelnen Knotenpunkte auch löschen, hier kann man oft extrem reduzieren und die Linien verbessern.
Wenn ihr fertig seid, markiert ihr alle Teile eures Pfads.
When working on the paths, you'll see that your path benefits if you remove some nodes. It will often improve the all over line.
When you're happy with the look, select all of your paths
3. Fill and Combine
Im Fill and Stroke Reiter entfernt ihr die Linie und füllt eure Pfade mit schwarz (oder einer anderen beliebigen Farbe). Dann wählt ihr "Path>Combine". Eure Pfade wird zu einem einzigen zusammengesetzt. Und dann seid ihr ready zum Speichern. :)
In the fill and stroke panel remove the stroke and fill your paths with black (or any other color). Then select "Path>Combine". Your paths will be fused into one. And then you're ready to save :)
Code Cleanup
Es gibt verschiedene Möglichkeiten, wie ihr euer SVG eurem Projekt hinzufügen könnt, zum einen über ein image-Tag oder ihr mag das inline, also mit dem Code, den Inkscape ausspuckt. Der Code gibt euch die Möglichkeit mit CSS zu gestalten, also empfehle ich das, aber der muss zuerst aufgeräumt werden.You can add the svgs using an image tag or if you do it inline, using the code inkscape created. The code gives you the possibility to add CSS-Styles so that's what I recommend, but first the code has to be cleaned up.
Inkscape Code
Den Code bekommt ihr, wenn ihr die Datei einfach mit einem Editor öffnet.You get the code if you open the svg-file with an editor
Der Code zu meinem Logo sieht so aus:
That's what the Code of my logo looks like directly out of inkscape
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
width="513"
height="296"
sodipodi:docname="ktlogooutlinefill.jpg">
<metadata
id="metadata2991">
<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="defs2989" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1003"
id="namedview2987"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
showguides="false"
inkscape:guide-bbox="true"
inkscape:zoom="2.6925676"
inkscape:cx="256.5"
inkscape:cy="148"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="svg2985">
<sodipodi:guide
orientation="0,1"
position="225.72713,30.621149"
id="guide3800" />
<inkscape:grid
type="xygrid"
id="grid3806"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<path
id="path3793"
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 169.15797,177.69953 c 0.14912,0.74558 36.47337,101.45033 36.47337,101.45033 0,0 3.87703,7.60493 14.16605,7.75405 10.28902,0.14911 115.69451,0.42573 121.828,0.29823 6.13349,-0.1275 11.34858,-2.99765 14.46427,-10.58726 7.23792,-17.63106 36.24248,-99.96818 35.15614,-98.85465 -8.10963,8.31265 -27.90139,8.78668 -35.15614,-0.45678 C 354.30027,171.63703 339,265.37885 339,265.37885 l -3,0 15.76529,-86.58427 c -11.16466,8.23354 -20.15535,6.10399 -33.45194,-1.48742 L 310,265.37885 l -3,0 7.78446,-87.80102 c -9.57155,10.016 -24.69993,7.17784 -33.23263,-0.78272 L 282,265.37885 l -3,0 -1.3455,-87.62812 c -12.74443,8.58427 -22.33822,8.00682 -33.10381,0.44735 L 258,265.37885 l -3,0 -14.62456,-88.3737 c -7.63033,10.33472 -25.01755,8.56975 -33.10382,0.8947 l 25.72838,87.479 -3,0 -26.45628,-88.3737 c -11.70209,9.05246 -19.43054,10.01678 -34.38575,0.69438 z m 196.54224,-62.55054 c 3.97677,-4.02027 8.92232,-3.98552 13.52717,-1.66591 12.50931,6.83395 10.27013,20.43147 2.86537,27.45416 -5.76347,5.2335 -27.72072,22.92291 -53.84216,24.05572 -15.14035,0.96568 -30.28747,1.07208 -45.44598,0.99959 0,0 50.31043,-24.72208 58.57334,-30.85262 8.2629,-6.13055 24.32226,-19.9909 24.32226,-19.9909 z m 32.66114,-10.97333 -0.18569,25.99749 c 0.63501,3.51143 2.15905,4.61897 4.8281,5.94228 0.96914,0.4865 61.83689,30.6399 61.83689,30.6399 l -61.83689,30.26851 c 0,0 -5.0138,1.29987 -5.0138,4.8281 0,3.52823 0.18569,26.74028 0.18569,26.74028 l 106.03263,-55.52321 -0.3714,-13.18445 z m -141.68937,12.72311 c -13.06691,3.41089 -59.35497,10.46445 -67.99606,20.42061 -8.6411,9.95615 -9.51223,31.21049 19.61761,32.36422 24.69663,0.54943 43.94504,1.74178 66.18759,-9.08817 18.40351,-10.49172 81.43986,-47.487 93.5439,-66.003987 4.31389,-7.908063 4.16484,-20.864657 -9.03411,-23.880505 -34.27208,9.662925 -65.99504,34.919292 -102.31893,46.187832 z M 298.9864,9.7503989 c 0,0 -5.20624,22.5466381 21.14044,27.9684241 15.97423,4.712171 22.55788,21.819944 12.14785,25.308953 C 251.91096,113.23724 228.75252,117.2763 228.75252,117.2763 197.61926,123.36863 198.7088,94.514202 213.63674,74.616134 231.27113,47.768857 264.97321,48.090766 283.88607,31.022158 288.61313,26.689022 298.9864,9.7503989 298.9864,9.7503989 z m -188.54146,94.4858811 0.18569,25.99749 c -0.63501,3.51143 -2.15905,4.61897 -4.8281,5.94228 -0.96914,0.4865 -61.83689,30.6399 -61.83689,30.6399 l 61.83689,30.26851 c 0,0 5.0138,1.29987 5.0138,4.8281 0,3.52823 -0.18569,26.74028 -0.18569,26.74028 L 4.598012,173.12963 4.9694047,159.94518 z M 177.75,70.75 c 0,0 3.75,-13.5 11.5,-13.75 C 197,56.75 209,56 209,56 l -78.75,203 c 0,0 -3.75,9.75 -10.875,9.75 -7.125,0 -19.75,0.25 -19.75,0.25 z"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccssssccccccccccccccccccccccccccscccccccscccccscccccccccccccccccscccccsccscc" />
</svg>Sehr viel Unnötigkeiten.
Zu Beginn einfach mal alles löschen, was wir nicht brauchen.
Also weg mit allem was nicht Pfad oder Dimensionsangaben ist.
A lot of unnessecary stuff.
First we just delete everything we don't need.
So remove everything that's not our path or other information of dimension
<svg
id="svg2985"
version="1.1"
width="513"
height="296">
<path
id="path3793"
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 169.15797,177.69953 c 0.14912,0.74558 36.47337,101.45033 36.47337,101.45033 0,0 3.87703,7.60493 14.16605,7.75405 10.28902,0.14911 115.69451,0.42573 121.828,0.29823 6.13349,-0.1275 11.34858,-2.99765 14.46427,-10.58726 7.23792,-17.63106 36.24248,-99.96818 35.15614,-98.85465 -8.10963,8.31265 -27.90139,8.78668 -35.15614,-0.45678 C 354.30027,171.63703 339,265.37885 339,265.37885 l -3,0 15.76529,-86.58427 c -11.16466,8.23354 -20.15535,6.10399 -33.45194,-1.48742 L 310,265.37885 l -3,0 7.78446,-87.80102 c -9.57155,10.016 -24.69993,7.17784 -33.23263,-0.78272 L 282,265.37885 l -3,0 -1.3455,-87.62812 c -12.74443,8.58427 -22.33822,8.00682 -33.10381,0.44735 L 258,265.37885 l -3,0 -14.62456,-88.3737 c -7.63033,10.33472 -25.01755,8.56975 -33.10382,0.8947 l 25.72838,87.479 -3,0 -26.45628,-88.3737 c -11.70209,9.05246 -19.43054,10.01678 -34.38575,0.69438 z m 196.54224,-62.55054 c 3.97677,-4.02027 8.92232,-3.98552 13.52717,-1.66591 12.50931,6.83395 10.27013,20.43147 2.86537,27.45416 -5.76347,5.2335 -27.72072,22.92291 -53.84216,24.05572 -15.14035,0.96568 -30.28747,1.07208 -45.44598,0.99959 0,0 50.31043,-24.72208 58.57334,-30.85262 8.2629,-6.13055 24.32226,-19.9909 24.32226,-19.9909 z m 32.66114,-10.97333 -0.18569,25.99749 c 0.63501,3.51143 2.15905,4.61897 4.8281,5.94228 0.96914,0.4865 61.83689,30.6399 61.83689,30.6399 l -61.83689,30.26851 c 0,0 -5.0138,1.29987 -5.0138,4.8281 0,3.52823 0.18569,26.74028 0.18569,26.74028 l 106.03263,-55.52321 -0.3714,-13.18445 z m -141.68937,12.72311 c -13.06691,3.41089 -59.35497,10.46445 -67.99606,20.42061 -8.6411,9.95615 -9.51223,31.21049 19.61761,32.36422 24.69663,0.54943 43.94504,1.74178 66.18759,-9.08817 18.40351,-10.49172 81.43986,-47.487 93.5439,-66.003987 4.31389,-7.908063 4.16484,-20.864657 -9.03411,-23.880505 -34.27208,9.662925 -65.99504,34.919292 -102.31893,46.187832 z M 298.9864,9.7503989 c 0,0 -5.20624,22.5466381 21.14044,27.9684241 15.97423,4.712171 22.55788,21.819944 12.14785,25.308953 C 251.91096,113.23724 228.75252,117.2763 228.75252,117.2763 197.61926,123.36863 198.7088,94.514202 213.63674,74.616134 231.27113,47.768857 264.97321,48.090766 283.88607,31.022158 288.61313,26.689022 298.9864,9.7503989 298.9864,9.7503989 z m -188.54146,94.4858811 0.18569,25.99749 c -0.63501,3.51143 -2.15905,4.61897 -4.8281,5.94228 -0.96914,0.4865 -61.83689,30.6399 -61.83689,30.6399 l 61.83689,30.26851 c 0,0 5.0138,1.29987 5.0138,4.8281 0,3.52823 -0.18569,26.74028 -0.18569,26.74028 L 4.598012,173.12963 4.9694047,159.94518 z M 177.75,70.75 c 0,0 3.75,-13.5 11.5,-13.75 C 197,56.75 209,56 209,56 l -78.75,203 c 0,0 -3.75,9.75 -10.875,9.75 -7.125,0 -19.75,0.25 -19.75,0.25 z"
/>
</svg>Schon besser. Sowas könnte man einbauen. Trotzdem mag ich kein inline-CSS und kopple dieses immer aus, dann noch ID anpassen und ich bin happy :D
A lot better. You could use something like that. I still dislike inline-CSS and just take it out. Then I adjust my ID and am happy. :D
<svg id="kt_logo" version="1.1" width="513" height="296">
<path d="m 169.15797,177.69953 c 0.14912,0.74558 36.47337,101.45033 36.47337,101.45033 0,0 3.87703,7.60493 14.16605,7.75405 10.28902,0.14911 115.69451,0.42573 121.828,0.29823 6.13349,-0.1275 11.34858,-2.99765 14.46427,-10.58726 7.23792,-17.63106 36.24248,-99.96818 35.15614,-98.85465 -8.10963,8.31265 -27.90139,8.78668 -35.15614,-0.45678 C 354.30027,171.63703 339,265.37885 339,265.37885 l -3,0 15.76529,-86.58427 c -11.16466,8.23354 -20.15535,6.10399 -33.45194,-1.48742 L 310,265.37885 l -3,0 7.78446,-87.80102 c -9.57155,10.016 -24.69993,7.17784 -33.23263,-0.78272 L 282,265.37885 l -3,0 -1.3455,-87.62812 c -12.74443,8.58427 -22.33822,8.00682 -33.10381,0.44735 L 258,265.37885 l -3,0 -14.62456,-88.3737 c -7.63033,10.33472 -25.01755,8.56975 -33.10382,0.8947 l 25.72838,87.479 -3,0 -26.45628,-88.3737 c -11.70209,9.05246 -19.43054,10.01678 -34.38575,0.69438 z m 196.54224,-62.55054 c 3.97677,-4.02027 8.92232,-3.98552 13.52717,-1.66591 12.50931,6.83395 10.27013,20.43147 2.86537,27.45416 -5.76347,5.2335 -27.72072,22.92291 -53.84216,24.05572 -15.14035,0.96568 -30.28747,1.07208 -45.44598,0.99959 0,0 50.31043,-24.72208 58.57334,-30.85262 8.2629,-6.13055 24.32226,-19.9909 24.32226,-19.9909 z m 32.66114,-10.97333 -0.18569,25.99749 c 0.63501,3.51143 2.15905,4.61897 4.8281,5.94228 0.96914,0.4865 61.83689,30.6399 61.83689,30.6399 l -61.83689,30.26851 c 0,0 -5.0138,1.29987 -5.0138,4.8281 0,3.52823 0.18569,26.74028 0.18569,26.74028 l 106.03263,-55.52321 -0.3714,-13.18445 z m -141.68937,12.72311 c -13.06691,3.41089 -59.35497,10.46445 -67.99606,20.42061 -8.6411,9.95615 -9.51223,31.21049 19.61761,32.36422 24.69663,0.54943 43.94504,1.74178 66.18759,-9.08817 18.40351,-10.49172 81.43986,-47.487 93.5439,-66.003987 4.31389,-7.908063 4.16484,-20.864657 -9.03411,-23.880505 -34.27208,9.662925 -65.99504,34.919292 -102.31893,46.187832 z M 298.9864,9.7503989 c 0,0 -5.20624,22.5466381 21.14044,27.9684241 15.97423,4.712171 22.55788,21.819944 12.14785,25.308953 C 251.91096,113.23724 228.75252,117.2763 228.75252,117.2763 197.61926,123.36863 198.7088,94.514202 213.63674,74.616134 231.27113,47.768857 264.97321,48.090766 283.88607,31.022158 288.61313,26.689022 298.9864,9.7503989 298.9864,9.7503989 z m -188.54146,94.4858811 0.18569,25.99749 c -0.63501,3.51143 -2.15905,4.61897 -4.8281,5.94228 -0.96914,0.4865 -61.83689,30.6399 -61.83689,30.6399 l 61.83689,30.26851 c 0,0 5.0138,1.29987 5.0138,4.8281 0,3.52823 -0.18569,26.74028 -0.18569,26.74028 L 4.598012,173.12963 4.9694047,159.94518 z M 177.75,70.75 c 0,0 3.75,-13.5 11.5,-13.75 C 197,56.75 209,56 209,56 l -78.75,203 c 0,0 -3.75,9.75 -10.875,9.75 -7.125,0 -19.75,0.25 -19.75,0.25 z" />
</svg>
<style>
#kt_logo{
fill: #000;
}
</style>
With images in the background
Ihr könnt SVGs auch mit Bildern füllen. Folgt dem Link um ein Beispiel zu sehen. Wenn ihr gerne noch ein Tutorial lesen würdet, wie ihr SVGs responsive hinbekommt (und eine Erklärung zum Bild im HG) lasst es mich wissen.You can fill SVGs with images too. Just follow the link to see an example. If you'd like a tutorial about how to make a svg responsive (and an explanation for the image in the background) let me know.
Responsive SVG with image background
No comments:
Post a Comment
Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+
Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered