For the purposes of this article, I will start with something like a personal business card. It will briefly introduce myself and show 3 network files related to my work.
From the screenshot above you can see that I used three icons (twitter,dribble and Github) to symbolize my network files. I downloaded these icons from Flaticon, a Web site with a variety of icons and symbols, and each icon provides vector and raster formatting.
PNG and SVG
We will use the SVG format in browsers that support SVG, and then use the PNG format icon in browsers that do not support SVG.
Normally I use sketch to output my PNG icon and SVG icon.
a simple SVG implementation
In the screenshot above you will notice that I have the grouping and graphics in the left panel properly named. (Adobe Illustrator has a similar view in the Layers panel.) It's important to name resources correctly, not just to keep them organized, but to help with the icons that follow.
Output SVG
Now I'm going to output these icons in SVG format, and we can do this easily with sketch slicing tools. You can get more information on sketch's output configuration options to see how it works. I'll output them as separate files and put them in the images directory in my project.
Typically, you want to show a picture in a website you need to point to this resource through the SRC attribute of an element, similar to the following:
<img src= "path-to-my-image.png" alt= ""/>
However, there are several different ways we can use them in HTML documents for SVG. For example, we can use intuitive SVG code to describe a picture. The code might be like this:
<?xml version= "1.0" encoding= "UTF-8" standalone= "no"?>
<svg width= "50px" height= "41px" viewbox= "0 0" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= " Http://www.w3.org/1999/xlink "xmlns:sketch=" Http://www.bohemiancoding.com/sketch/ns ">
<!--Generator:sketch 3.1 (8751)-Http://www.bohemiancoding.com/sketch-->
<title>twitter-icon</title>
<desc>created with sketch.</desc>
<defs></defs>
<g id= "Page-1" stroke= "None" stroke-width= "1" fill= "None" fill-rule= "EvenOdd" sketch:type= "Mspage" >
<g id= "Twitter-icon" sketch:type= "Mslayergroup" fill= "#55ACEE" >
<path d= "m0,36.3461306 C0.803663004, 36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 c7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 c8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 c2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,- 0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 c44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623, 3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 c44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id= Bird" sketch:type= "Msshapegroup" ></path>
</g>
</g>
</svg>
This is one of the icons I output above, and is based on XML-formatted rendering. The code is almost like a piece of HTML, which means we can insert this code into the page.
Add inline SVG to HTML
Let's start with a basic HTML page that contains 3 PNG icons with links and their containers:
<div class= "section" >
<a href= "http://twitter.com/DavidDarnes" title= "Twitter profile" >
<img alt= "Twitter" width= "height=" src= "Img/twitter-icon.png" >
</a>
<a href= "Http://dribbble.com/DavidDarnes" title= "Dribbble profile" >
<img alt= "dribbble" width= "height=" and "src=" >
</a>
<a href= "Http://github.com/DavidDarnes" title= "GitHub profile" >
<img alt= "GitHub" width= "height=" and "src=" >
</a>
</div>
Now I'm going to start copying the SVG icon code and sticking it in here, but I'll ignore the <?xml version= "1.0" encoding= "UTF-8" standalone= "no"?> the code for the file encoding and other information. Because this part of the information is already included in the HTML document, we don't need to copy it in.
<div class= "section" >
<a href= "http://twitter.com/DavidDarnes" title= "Twitter profile" >
<svg width= "50px" height= "41px" viewbox= "0 0" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= " Http://www.w3.org/1999/xlink "xmlns:sketch=" Http://www.bohemiancoding.com/sketch/ns ">
<!--Generator:sketch 3.1 (8751)-Http://www.bohemiancoding.com/sketch-->
<title>twitter-icon</title>
<desc>created with sketch.</desc>
<defs></defs>
<g id= "Page-1" stroke= "None" stroke-width= "1" fill= "None" fill-rule= "EvenOdd" sketch:type= "Mspage" >
<g id= "Twitter-icon" sketch:type= "Mslayergroup" fill= "#55ACEE" >
<path d= "m0,36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387, 36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 c6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 c3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 c37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 c47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 c44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 c9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" Bird "sketch:type=" Msshapegroup "></path>
</g>
</g>
</svg>
<img alt= "Twitter" width= "height=" src= "Img/twitter-icon.png" >
</a>
<a href= "Http://dribbble.com/DavidDarnes" title= "Dribbble profile" >
<img alt= "dribbble" width= "height=" and "src=" >
</a>
<a href= "Http://github.com/DavidDarnes" title= "GitHub profile" >
<img alt= "GitHub" width= "height=" and "src=" >
</a>
</div>
In this HTML page, I've put SVG on top of the PNG icon. Now I'm going to comment out the code for the PNG picture to prevent it from appearing again after the SVG picture.
Clean SVG
Then I'm going to clean up the SVG code above. Remove those optional element attributes because the properties I want to remove do not affect the performance of SVG. The following is the code comparison of optimizations followed by optimizations, but they perform the same thing:
<svg width= "50px" height= "41px" viewbox= "0 0" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= " Http://www.w3.org/1999/xlink "xmlns:sketch=" Http://www.bohemiancoding.com/sketch/ns ">
<!--Generator:sketch 3.1 (8751)-Http://www.bohemiancoding.com/sketch-->
<title>twitter-icon</title>
<desc>created with sketch.</desc>
<defs></defs>
<g id= "Page-1" stroke= "None" stroke-width= "1" fill= "None" fill-rule= "EvenOdd" sketch:type= "Mspage" >
<g id= "Twitter-icon" sketch:type= "Mslayergroup" fill= "#55ACEE" >
<path d= "m0,36.3461306 C0.803663004, 36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 c7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 c8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 c2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,- 0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 c44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623, 3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 c44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id= Bird" sketch:type= "Msshapegroup" ></path>
</g>
</g>
</svg>
<svg width= "50px" height= "41px" viewbox= "0 0 M" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<g id= "Twitter-icon" fill= "#55ACEE" >
<path d= "m0,36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 c7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 c6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 c8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 c3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 c2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 c37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 c44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 c47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 c44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 c44.9750916,25.2155541 34.6424908,41 15.7472527,41 c9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" Bird "></path>
</g>
</svg>
Notice the elements that I removed. <title>, <desc>, and <defs> elements are not needed at the moment, but we might use them later in this article. The <g> element that represents the grouping is equivalent to my grouping in the sketch document. The default sketch is to put everything in one page, equivalent to the group element <g id= "Page-1" .... You can remove this element because it has no effect on us (the group elements within it are important). Sketch provides an option for us to handle SVG cleanup before the output, but it's not a problem if you manually clean it up a lot.
The final step in this section is to remove the height and Width properties on the SVG label. They are defined in my CSS file as follows:
<svg viewbox= "0 0 M" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<g id= "Twitter-icon" fill= "#55ACEE" >
<path d= "m0,36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 c7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 C10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 c6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 c8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 C3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 c3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 c2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 C24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 c37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 c44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 c47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 c44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 c44.9750916,25.2155541 34.6424908,41 15.7472527,41 c9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" Bird "></path>
</g>
</svg>
. Icon {
max-width:40px;
max-height:40px;
Transition:. 2s;
-webkit-filter:drop-shadow (0 1px 0 #11222d);
}
If you follow my steps you should be able to see a concise, sharp vector in the browser.
Tip: You can zoom out of the browser to see if the image is SVG. This image should not be changed by the magnification of your browser.
Provide fallback
If you use SVG to display on the client side, you will want to see how well the browser supports it, and in fact SVG can work in all browsers except IE8 (and IE8) and Opera Mini. But for now, IE8 only 4% of the world's share, Opera Mini is only 3% of the total. So you don't need to be compatible with them, but I'll give you a solution anyway.
<a href= "http://twitter.com/DavidDarnes" title= "Twitter profile" >
<svg viewbox= "0 0 M" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<g id= "Twitter-icon" fill= "#55ACEE" >
<path d= "m0,36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 c7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 c6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 c8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 C5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 c3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 c2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 C8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 c37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 c44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 C47.9210623, 3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 c44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" Bird "></path>
</g>
</svg>
<!--<img alt= "Twitter" width= "height=" src= "Img/twitter-icon.png" >-->
</a>
This is one of the icons in the top 3 icons, but you'll notice that my PNG icon is inside, just in the form of annotations. This PNG image is our fallback.
Kill the Notes .
First I will remove the comment above. I need to move <img> to the <svg> element and put it behind the group element <g>.
Then I'll wrap the <img> in the SVG-specific element foreignobject. If the browser does not recognize the SVG vector information, it will find "foreign object" and use the <img> elements inside it. We also need to tell the browser that if you support vector icons, you should ignore the "foreign object". This is the purpose of the <switch> element, which I use to wrap up <g> elements and <foreignObject> elements.
Here is the updated code:
<a href= "http://twitter.com/DavidDarnes" title= "Twitter profile" >
<svg viewbox= "0 0 M" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<switch>
<g id= "Twitter-icon" fill= "#55ACEE" >
<path d= "m0,36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 c7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 c8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 c2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 c44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 c47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 c44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 c44.9750916,25.2155541 34.6424908,41 15.7472527,41 c9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" Bird "></path>
</g>
<foreignObject>
<img alt= "Twitter" width= "height=" src= "Img/twitter-icon.png" >
</foreignObject>
</switch>
</svg>
</a>
If you follow my steps here and write down my HTML above, you will find that if your browser does not support SVG, it will use a PNG image to display it. (But I tested that this way would cause the PNG picture to be loaded, not in a commented way, so this is not a desirable scenario)
Create an SVG Sprite
SVG sprites is almost the same as image sprites. In the simplest form, sprites is a picture that merges several graphs together. Each image can be obtained by CSS and HTML, usually by sprite a picture in one of the specified coordinates of the display "window" (out of the window part is intercepted and hidden).
Its main advantage is to reduce the load time of the page, optimize the development process, and maintain the consistency of the image elements in the page. The second and 3rd of these can be well applied in SVG sprites. Because we can stay in one place and update our SVG instead of getting SVG blocks of code scattered across the document.
I will create a new <svg> element in front of the page's <head> element's closing tag </head>. This <svg> element will contain all the icons I have in front of me.
Next I'm going to put the icons inside. But I don't need to put the entire SVG code block in, so just stack the group element <g> and its content into the <svg> elements of the head.
<!doctype html>
<html lang= "en" >
<head>
<meta charset= "Utf-8"/>
<title>david Darnes-web Designer &amp; Front-End developer</title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css"/>
<!--[If ie]>
<script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
<svg display= "None" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<g id= "Twitter-icon" fill= "#55ACEE" >
<path d= "m0,36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 c7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 C6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 c8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 C3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 c2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 C37.6210623,- 0.0328738740.2908425,1.2251982 42.1648352,3.23844595 c44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 c47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 C44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 c44.9750916,25.2155541 34.6424908,41 15.7472527,41 C9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" Bird "></path>
</g>
<g id= "Dribbble-icon" >
<path d= "m25.0002551,0 c11.1927551,0 0.000255102041,11.1925 0.000255102041,25 C0.000255102041,38.8075 11.1927551,50 25.0002551,50 c38.8077551,50 50.0002551,38.8075 50.0002551,25 c50.0002551,11.1925 25.0002551,0 l25.0002551,0 l25.0002551,0 Z "id= ball" fill= "#EA4C89" ></path>
<path d= "m25.0002551,- 0.000510204082 c11.1927551,-0.000510204082 0.000255102041,11.1919898 0.000255102041,24.9994898 C0.000255102041, 38.8069898 11.1927551,49.9994898 25.0002551,49.9994898 c38.8077551,49.9994898 50.0002551,38.8069898 50.0002551,24.9994898 c50.0002551,11.1919898 38.8077551,-0.000510204082 25.0002551,-0.000510204082 L25.0002551,- 0.000510204082 l25.0002551,-0.000510204082 Z m25.0002551,3.6219898 c30.4465051,3.6219898 35.4177551,5.6594898 39.1927551,9.0119898 c36.4190051,12.6707398 32.2052551,15.1069898 27.9827551,16.7557398 C25.6815051,12.5457398 22.8477551,8.1069898 19.9640051,4.2182398 c21.5777551,3.8282398 23.2640051,3.6219898 25.0002551,3.6219898 l25.0002551,3.6219898 l25.0002551,3.6219898 Z m15.9052551,5.6482398 c18.6915051,9.8169898 21.3915051,13.6832398 23.8590051,18.0594898 c17.6202551,19.6757398 10.5727551,20.6457398 4.0615051,20.6619898 C5.4340051,14.0019898 9.9077551,8.4719898 15.9052551,5.6482398 l15.9052551,5.6482398 l15.9052551,5.6482398 Z m41.5640051,11.4844898 C44.5465051,15.1332398 46.3427551,19.7869898 46.3777551,24.8582398 c41.4327551,23.8844898 36.5140051,23.6282398 31.5077551,24.1332398 c30.9440051,22.7294898 30.2627551,21.3969898 29.6090051,19.9582398 c33.9252551,18.2169898 38.5402551,15.2369898 41.5640051,11.4844898 l41.5640051,11.4844898 l41.5640051,11.4844898 Z m25.5952551,21.3669898 C26.1302551,22.5057398 26.7502551,23.7119898 27.3315051,24.9457398 c20.3690051,28.0157398 12.9640051,32.1182398 9.1190051,39.3107398 c5.7027551,35.5219898 3.6227551,30.5019898 3.6227551,24.9994898 c3.6227551,24.7907398 3.6265051,24.5819898 3.6327551,24.3744898 c11.0890051,24.3382398 18.4077551,23.4057398 25.5952551,21.3669898 L25.5952551,21.3669898 l25.5952551,21.3669898 Z m36.8915051,27.1957398 c39.9990051,27.1857398 43.2102551,27.6194898 46.1115051,28.3832398 c45.1627551,34.3532398 41.7402551,39.5019898 36.9277551,42.7419898 c35.7802551,37.5232398 34.6865051,32.5294898 32.7527551,27.4944898 c34.0865051,27.2957398 35.4790051,27.1994898 36.8915051,27.1957398 L36.8915051,27.1957398 l36.8915051,27.1957398 Z m28.7965051,28.4719898 c30.7677551,33.5619898 32.3140051,39.1994898 33.3515051,44.6857398 c30.7852551,45.7757398 27.9640051,46.3782398 25.0002551,46.3782398 c20.0565051,46.3782398 15.5040051,44.6982398 11.8827551,41.8794898 c15.7540051,35.5982398 21.7502551,30.8457398 28.7965051,28.4719898 L28.7965051,28.4719898 l28.7965051,28.4719898 Z "id=" Ball-lines "fill=" #C32361 "></path>
</g>
<g id= "Github-icon" fill= "#161614" >
<path d= "m0,25.633467 C0, 36.9584555 7.1625894,46.5651047 17.0969029,49.954576 c18.3477086,50.1906116 18.8035237,49.3991056 18.8035237,48.719323 c18.8035237,48.1119247 18.7820375,46.4990147 18.7697597,44.3605321 C11.8158937,45.9089257 10.3486909,40.9238537 10.3486909,40.9238537 c9.21145523,37.9623936 7.57236256,37.1740347 7.57236256,37.1740347 c5.30249547,35.5847282 7.74425243,35.6161996 7.74425243,35.6161996 c10.2535376,35.7971603 11.5734062,38.2582249 11.5734062,38.2582249 c13.8033703,42.1748424 17.4253353,41.0434451 18.8495657,40.3872661 C19.0767059,38.7318697 19.7228276,37.6020459 20.4364775,36.9616026 c14.8853556,36.314865 9.04877375,34.1150132 9.04877375,24.2927848 c9.04877375,21.494976 10.0233279,19.2054306 11.6225176,17.4147071 c11.3646828,16.766396 10.5067682,14.1589893 11.8680745,10.6310438 c11.8680745,10.6310438 13.9660518,9.9418198 18.7421345,13.2589069 C20.73575,12.6892743 22.875165,12.4060315 25.0007674,12.3950166 c27.124835,12.4060315 29.2627152,12.6892743 31.2594002,13.2589069 C36.0324135,9.9418198 38.1273213,10.6310438 38.1273213,10.6310438 c39.4916971,14.1589893 38.6337825,16.766396 38.3774824,17.4147071 c39.9797416,19.2054306 40.9466221,21.494976 40.9466221,24.2927848 c40.9466221,34.1401903 35.1008318,36.3069972 29.5328279,36.9411462 c30.4291108,37.7326523 31.2287056,39.2967816 31.2287056,41.688609 C31.2287056,45.1142725 31.198011,47.8790363 31.198011,48.719323 c31.198011,49.4053999 31.6492219,50.2032002 32.9169097,49.9530025 c42.8435495,46.5556633 50,36.9553083 50,25.633467 c50,11.4760513 38.8056724,0 24.9976979,0 C11.1943276,0 0,11.4760513 0,25.633467 Z "id=" Octocat "></path>
</g>
</svg>
</head>
Tip: If you are familiar with the use of grunt, you can merge all your separate SVG files with a plugin from the move.
Hide It!
Now we put all the icons on the head and we need to hide them. <svg> Add a property to this tag display= "None" to make all icons appear in the header of the page.
define each icon
Our next step is to define each icon so that we can reuse them in the page, defined by the <defs> elements that we deleted before we cleaned up SVG, by wrapping all the group elements <g>, and putting all the icons in, Then use it anywhere on the page.
<!doctype html>
<html lang= "en" >
<head>
<meta charset= "Utf-8"/>
<title>david Darnes-web Designer &amp; Front-End developer</title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css"/>
<!--[If ie]>
<script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
<svg display= "None" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<defs>
<g id= "Twitter-icon" fill= "#55ACEE" >
<path d= "m0,36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387, 36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 c6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 c3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 c37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 c47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 c44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 c9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" bird >
</g>
<g id= "Dribbble-icon" >
<path d= "m25.0002551,0 c11.1927551,0 0.000255102041,11.1925 0.000255102041,25 C0.000255102041,38.8075 11.1927551,50 25.0002551,50 c38.8077551,50 50.0002551,38.8075 50.0002551,25 c50.0002551,11.1925 25.0002551,0 l25.0002551,0 l25.0002551,0 Z "id= ball" fill= "#EA4C89" ></path>
<path d= "m25.0002551,-0.000510204082 c11.1927551,-0.000510204082 0.000255102041,11.1919898 0.000255102041,24.9994898 c0.000255102041,38.8069898 11.1927551,49.9994898 25.0002551,49.9994898 C38.8077551, 49.9994898 50.0002551,38.8069898 50.0002551,24.9994898 c50.0002551,11.1919898 38.8077551,-0.000510204082 25.0002551 , -0.000510204082 l25.0002551,-0.000510204082 l25.0002551,-0.000510204082 Z m25.0002551,3.6219898 C30.4465051, 3.6219898 35.4177551,5.6594898 39.1927551,9.0119898 c36.4190051,12.6707398 32.2052551,15.1069898 27.9827551,16.7557398 c25.6815051,12.5457398 22.8477551,8.1069898 19.9640051,4.2182398 C21.5777551,3.8282398 23.2640051,3.6219898 25.0002551,3.6219898 l25.0002551,3.6219898 l25.0002551,3.6219898 Z M15.9052551,5.6482398 c18.6915051,9.8169898 21.3915051,13.6832398 23.8590051,18.0594898 c17.6202551,19.6757398 10.5727551,20.6457398 4.0615051,20.6619898 C5.4340051,14.0019898 9.9077551,8.4719898 15.9052551,5.6482398 l15.9052551,5.6482398 l15.9052551,5.6482398 Z M41.5640051, 11.4844898 c44.5465051,15.1332398 46.3427551,19.7869898 46.3777551,24.8582398 c41.4327551,23.8844898 36.5140051,23.6282398 31.5077551,24.1332398 c30.9440051,22.7294898 30.2627551,21.3969898 29.6090051,19.9582398 c33.9252551,18.2169898 38.5402551,15.2369898 41.5640051,11.4844898 l41.5640051,11.4844898 L41.5640051,11.4844898 Z m25.5952551,21.3669898 c26.1302551,22.5057398 26.7502551,23.7119898 27.3315051,24.9457398 C20.3690051,28.0157398 12.9640051,32.1182398 9.1190051,39.3107398 c5.7027551,35.5219898 3.6227551,30.5019898 3.6227551,24.9994898 c3.6227551,24.7907398 3.6265051,24.5819898 3.6327551,24.3744898 c11.0890051,24.3382398 18.4077551,23.4057398 25.5952551,21.3669898 l25.5952551,21.3669898 l25.5952551,21.3669898 Z m36.8915051,27.1957398 C39.9990051,27.1857398 43.2102551,27.6194898 46.1115051,28.3832398 c45.1627551,34.3532398 41.7402551,39.5019898 36.9277551,42.7419898 C35.7802551,37.5232398 34.6865051,32.5294898 32.7527551,27.4944898 c34.0865051,27.2957398 35.4790051,27.1994898 36.8915051,27.1957398 l36.8915051,27.1957398 l36.8915051,27.1957398 Z m28.7965051,28.4719898 C30.7677551,33.5619898 32.3140051,39.1994898 33.3515051,44.6857398 c30.7852551,45.7757398 27.9640051,46.3782398 25.0002551,46.3782398 c20.0565051,46.3782398 15.5040051,44.6982398 11.8827551,41.8794898 c15.7540051,35.5982398 21.7502551,30.8457398 28.7965051,28.4719898 l28.7965051,28.4719898 l28.7965051,28.4719898 Z "id= ball-lines" fill= "#C32361" ></path >
</g>
<g id= "Github-icon" fill= "#161614" >
<path d= "m0,25.633467 c0,36.9584555 7.1625894,46.5651047 17.0969029,49.954576 C18.3477086,50.1906116 18.8035237,49.3991056 18.8035237,48.719323 c18.8035237,48.1119247 18.7820375,46.4990147 18.7697597,44.3605321 c11.8158937,45.9089257 10.3486909,40.9238537 10.3486909,40.9238537 c9.21145523,37.9623936 7.57236256,37.1740347 7.57236256,37.1740347 c5.30249547,35.5847282 7.74425243,35.6161996 7.74425243,35.6161996 C10.2535376,35.7971603 11.5734062,38.2582249 11.5734062,38.2582249 c13.8033703,42.1748424 17.4253353,41.0434451 18.8495657,40.3872661 c19.0767059,38.7318697 19.7228276,37.6020459 20.4364775,36.9616026 c14.8853556,36.314865 9.04877375,34.1150132 9.04877375,24.2927848 c9.04877375,21.494976 10.0233279,19.2054306 11.6225176,17.4147071 C11.3646828,16.766396 10.5067682,14.1589893 11.8680745,10.6310438 c11.8680745,10.6310438 13.9660518,9.9418198 18.7421345,13.2589069 C20.73575,12.6892743 22.875165,12.4060315 25.0007674,12.3950166 c27.124835,12.4060315 29.2627152,12.6892743 31.2594002,13.2589069 c36.0324135,9.9418198 38.1273213,10.6310438 38.1273213,10.6310438 C39.4916971,14.1589893 38.6337825,16.766396 38.3774824,17.4147071 c39.9797416,19.2054306 40.9466221,21.494976 40.9466221,24.2927848 c40.9466221,34.1401903 35.1008318,36.3069972 29.5328279,36.9411462 c30.4291108,37.7326523 31.2287056,39.2967816 31.2287056,41.688609 c31.2287056,45.1142725 31.198011,47.8790363 31.198011,48.719323 C31.198011,49.4053999 31.6492219,50.2032002 32.9169097,49.9530025 c42.8435495,46.5556633 50,36.9553083 50,25.633467 C50,11.4760513 38.8056724,0 24.9976979,0 c11.1943276,0 0,11.4760513 0,25.633467 Z "id=" Octocat "></path>
</g>
</defs>
</svg>
</head>
Using Icons
We have defined the icons, but we need a way to refer to them, and use elements are used to do this thing. The <use> element allows us to remove any element from the <defs> element and place it anywhere on the page. We get them through their IDs, which is why it's important to name our icons in the sketch document.
Notice the IDs of the elements in the previous example, and then I map them by using the use element, <use xlink:href= "#twitter-icon" ></use>.
<div class= "section" >
<a href= "http://twitter.com/DavidDarnes" title= "Twitter profile" >
<svg class= "icon" viewbox= "0 0" >
<switch>
<use xlink:href= "#twitter-icon" ></use>
<foreignObject>
<img class= "icon" src= "img/twitter-icon.png" alt= "Twitter" >
</foreignObject>
</switch>
</svg>
</a>
<a href= "Http://dribbble.com/DavidDarnes" title= "Dribbble profile" >
<svg class= "icon" viewbox= "0 0 M" >
<switch>
<use xlink:href= "#dribbble-icon" ></use>
<foreignObject>
<img class= "icon" src= "Img/dribbble-icon.png" alt= "dribbble" >
</foreignObject>
</switch>
</svg>
</a>
<a href= "Http://github.com/DavidDarnes" title= "GitHub profile" >
<svg class= "icon" viewbox= "0 0 M" >
<switch>
<use xlink:href= "#github-icon" ></use>
<foreignObject>
<img class= "icon" src= "Img/github-icon.png" alt= "GitHub" >
</foreignObject>
</switch>
</svg>
</a>
</div>
Follow my tutorial here and you will find that your pictures have not changed, but you can now use them in any number of places (in any size).
Make your SVG sprite more perfect.
One advantage of using SVG sprites is that the code on your page becomes more concise and more readable for your project partner. But we can also optimize it further.
I'll replace the <g> elements in the SVG sprite with the <symbol> element, and I'll move the Viewbox attribute from the SVG element to the <symbol> element.
<!doctype html>
<html lang= "en" >
<head>
<meta charset= "Utf-8"/>
<title>david Darnes-web Designer &amp; Front-End developer</title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css"/>
<!--[If ie]>
<script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
<svg display= "None" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<defs>
<symbol id= "Twitter-icon" viewbox= "0 0" fill= "#55ACEE" >
<path d= "m0,36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387, 36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 c6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 C8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 c2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 c3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 C2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 c24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,-0.0328738739 c37.6210623,-0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 C44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 c47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 c46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 c44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 C44.9750916,25.2155541 34.6424908,41 15.7472527,41 c9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" bird >
</symbol>
<symbol id= "Dribbble-icon" viewbox= "0 0 M" >
<path d= "m25.0002551,0 c11.1927551,0 0.000255102041,11.1925 0.000255102041,25 C0.000255102041,38.8075 11.1927551,50 25.0002551,50 c38.8077551,50 50.0002551,38.8075 50.0002551,25 c50.0002551,11.1925 25.0002551,0 l25.0002551,0 l25.0002551,0 Z "id= ball" fill= "#EA4C89" ></path>
<path d= "m25.0002551,-0.000510204082 c11.1927551,-0.000510204082 0.000255102041,11.1919898 0.000255102041,24.9994898 c0.000255102041,38.8069898 11.1927551,49.9994898 25.0002551,49.9994898 C38.8077551, 49.9994898 50.0002551,38.8069898 50.0002551,24.9994898 c50.0002551,11.1919898 38.8077551,-0.000510204082 25.0002551 , -0.000510204082 l25.0002551,-0.000510204082 l25.0002551,-0.000510204082 Z m25.0002551,3.6219898 C30.4465051, 3.6219898 35.4177551,5.6594898 39.1927551,9.0119898 c36.4190051,12.6707398 32.2052551,15.1069898 27.9827551,16.7557398 c25.6815051,12.5457398 22.8477551,8.1069898 19.9640051,4.2182398 C21.5777551,3.8282398 23.2640051,3.6219898 25.0002551,3.6219898 l25.0002551,3.6219898 l25.0002551,3.6219898 Z M15.9052551,5.6482398 c18.6915051,9.8169898 21.3915051,13.6832398 23.8590051,18.0594898 c17.6202551,19.6757398 10.5727551,20.6457398 4.0615051,20.6619898 C5.4340051,14.0019898 9.9077551,8.4719898 15.9052551,5.6482398 l15.9052551,5.6482398 l15.9052551,5.6482398 Z M41.5640051, 11.4844898 c44.5465051,15.1332398 46.3427551,19.7869898 46.3777551,24.8582398 c41.4327551,23.8844898 36.5140051,23.6282398 31.5077551,24.1332398 c30.9440051,22.7294898 30.2627551,21.3969898 29.6090051,19.9582398 c33.9252551,18.2169898 38.5402551,15.2369898 41.5640051,11.4844898 l41.5640051,11.4844898 L41.5640051,11.4844898 Z m25.5952551,21.3669898 c26.1302551,22.5057398 26.7502551,23.7119898 27.3315051,24.9457398 C20.3690051,28.0157398 12.9640051,32.1182398 9.1190051,39.3107398 c5.7027551,35.5219898 3.6227551,30.5019898 3.6227551,24.9994898 c3.6227551,24.7907398 3.6265051,24.5819898 3.6327551,24.3744898 c11.0890051,24.3382398 18.4077551,23.4057398 25.5952551,21.3669898 l25.5952551,21.3669898 l25.5952551,21.3669898 Z m36.8915051,27.1957398 C39.9990051,27.1857398 43.2102551,27.6194898 46.1115051,28.3832398 c45.1627551,34.3532398 41.7402551,39.5019898 36.9277551,42.7419898 C35.7802551,37.5232398 34.6865051,32.5294898 32.7527551,27.4944898 c34.0865051,27.2957398 35.4790051,27.1994898 36.8915051,27.1957398 l36.8915051,27.1957398 l36.8915051,27.1957398 Z m28.7965051,28.4719898 C30.7677551,33.5619898 32.3140051,39.1994898 33.3515051,44.6857398 c30.7852551,45.7757398 27.9640051,46.3782398 25.0002551,46.3782398 c20.0565051,46.3782398 15.5040051,44.6982398 11.8827551,41.8794898 c15.7540051,35.5982398 21.7502551,30.8457398 28.7965051,28.4719898 l28.7965051,28.4719898 l28.7965051,28.4719898 Z "id= ball-lines" fill= "#C32361" ></path >
</symbol>
<symbol id= "Github-icon" viewbox= "0 0" fill= "#161614" >
<path d= "m0,25.633467 c0,36.9584555 7.1625894,46.5651047 17.0969029,49.954576 C18.3477086,50.1906116 18.8035237,49.3991056 18.8035237,48.719323 c18.8035237,48.1119247 18.7820375,46.4990147 18.7697597,44.3605321 c11.8158937,45.9089257 10.3486909,40.9238537 10.3486909,40.9238537 c9.21145523,37.9623936 7.57236256,37.1740347 7.57236256,37.1740347 c5.30249547,35.5847282 7.74425243,35.6161996 7.74425243,35.6161996 C10.2535376,35.7971603 11.5734062,38.2582249 11.5734062,38.2582249 c13.8033703,42.1748424 17.4253353,41.0434451 18.8495657,40.3872661 c19.0767059,38.7318697 19.7228276,37.6020459 20.4364775,36.9616026 c14.8853556,36.314865 9.04877375,34.1150132 9.04877375,24.2927848 c9.04877375,21.494976 10.0233279,19.2054306 11.6225176,17.4147071 C11.3646828,16.766396 10.5067682,14.1589893 11.8680745,10.6310438 c11.8680745,10.6310438 13.9660518,9.9418198 18.7421345,13.2589069 C20.73575,12.6892743 22.875165,12.4060315 25.0007674,12.3950166 c27.124835,12.4060315 29.2627152,12.6892743 31.2594002,13.2589069 c36.0324135,9.9418198 38.1273213,10.6310438 38.1273213,10.6310438 C39.4916971,14.1589893 38.6337825,16.766396 38.3774824,17.4147071 c39.9797416,19.2054306 40.9466221,21.494976 40.9466221,24.2927848 c40.9466221,34.1401903 35.1008318,36.3069972 29.5328279,36.9411462 c30.4291108,37.7326523 31.2287056,39.2967816 31.2287056,41.688609 c31.2287056,45.1142725 31.198011,47.8790363 31.198011,48.719323 C31.198011,49.4053999 31.6492219,50.2032002 32.9169097,49.9530025 c42.8435495,46.5556633 50,36.9553083 50,25.633467 C50,11.4760513 38.8056724,0 24.9976979,0 c11.1943276,0 0,11.4760513 0,25.633467 Z "id=" Octocat "></path>
</symbol>
</defs>
</svg>
</head>
Using <symbol> elements is not only more semantic, at least in my case, we can also avoid the recurrence of the Viewbox attribute on the <svg> element. In addition, we can now put the previously removed title and desc elements back, using them to improve the accessibility of our icons.
<!doctype html>
<html lang= "en" >
<head>
<meta charset= "Utf-8"/>
<title>david Darnes-web Designer &amp; Front-End developer</title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css"/>
<!--[If ie]>
<script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
<svg display= "None" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<symbol id= "Twitter-icon" viewbox= "0 0" fill= "#55ACEE" >
<title>Twitter</title>
<desc>twitter account</desc>
<path d= "M0, 36.3461306 c0.803663004,36.4417973 1.62142857,36.4907387 2.45054945,36.4907387 C7.26336996,36.4907387 11.6928571,34.8346712 15.2086081,32.0564595 c10.71337,31.9727973 6.91959707,28.9779505 5.61245421,24.8624369 c6.23956044,24.9834054 6.88315018,25.0482297 7.54505495,25.0482297 c8.48205128,25.0482297 9.38956044,24.9217207 10.2516484,24.684955 c5.55201465,23.7334595 2.01117216,19.5466577 2.01117216,14.5276667 C2.01117216,14.4840811 2.01117216,14.4406802 2.01190476,14.397464 c3.3970696,15.1733243 4.98095238,15.6392838 6.66501832,15.693027 c3.90860806,13.8354685 2.09487179,10.6648018 2.09487179,7.07102252 c2.09487179,5.17264865 2.6014652,3.39321171 3.48571429,1.86328378 c8.55238095,8.13037387 16.1217949,12.2543829 24.6595238,12.6863604 C24.4844322,11.9282297 24.3934066,11.1375946 24.3934066,10.3257207 c24.3934066,4.60511261 28.9930403,-0.0328738739 34.6664835,- 0.0328738739 C37.6210623, -0.0328738739 40.2908425,1.2251982 42.1648352,3.23844595 c44.5047619,2.77377928 46.7032967,1.91167117 48.6880952,0.724702703 c47.9210623,3.14351802 46.2923077,5.17357207 44.1712454,6.45565315 C46.2492674,6.20522072 48.2291209,5.6483964 50.0714286,4.82451802 c48.6941392,6.90185135 46.952381,8.72635135 44.9454212,10.1868378 c44.9652015,10.6310045 44.9750916,11.0777568 44.9750916,11.5269099 c44.9750916,25.2155541 34.6424908,41 15.7472527,41 c9.9459707,41 4.54615385,39.2852027 0,36.3461306 l0,36.3461306 Z "id=" Bird "></path>
</symbol>
<symbol id= "Dribbble-icon" viewbox= "0 0 M" >
<title>Dribbble</title>
<desc>dribbble portfolio</desc>
<path d= "m25.0002551,0 c11.1927551,0 0.000255102041,11.1925 0.000255102041,25 C0.000255102041,38.8075 11.1927551,50 25.0002551,50 c38.8077551,50 50.0002551,38.8075 50.0002551,25 c50.0002551,11.1925 25.0002551,0 l25.0002551,0 l25.0002551,0 Z "id= ball" fill= "#EA4C89" ></path>
<path d= " m25.0002551,-0.000510204082 c11.1927551,-0.000510204082 0.000255102041,11.1919898 0.000255102041,24.9994898 c0.000255102041,38.8069898 11.1927551,49.9994898 25.0002551,49.9994898 c38.8077551,49.9994898 50.0002551,38.8069898 50.0002551,24.9994898 c50.0002551,11.1919898 38.8077551,-0.000510204082 25.0002551,- 0.000510204082 l25.0002551,-0.000510204082 l25.0002551,-0.000510204082 Z m25.0002551,3.6219898 C30.4465051, 3.6219898 35.4177551,5.6594898 39.1927551,9.0119898 c36.4190051,12.6707398 32.2052551,15.1069898 27.9827551,16.7557398 c25.6815051,12.5457398 22.8477551,8.1069898 19.9640051,4.2182398 C21.5777551,3.8282398 23.2640051,3.6219898 25.0002551,3.6219898 l25.0002551,3.6219898 l25.0002551,3.6219898 Z M15.9052551,5.6482398 c18.6915051,9.8169898 21.3915051,13.6832398 23.8590051,18.0594898 c17.6202551,19.6757398 10.5727551,20.6457398 4.0615051,20.6619898 c5.4340051,14.0019898 9.9077551,8.4719898 15.9052551,5.6482398 l15.9052551,5.6482398 l15.9052551,5.6482398 Z m41.5640051,11.4844898 C44.5465051, 15.1332398 46.3427551,19.7869898 46.3777551,24.8582398 c41.4327551,23.8844898 36.5140051,23.6282398 31.5077551,24.1332398 c30.9440051,22.7294898 30.2627551,21.3969898 29.6090051,19.9582398 C33.9252551,18.2169898 38.5402551,15.2369898 41.5640051,11.4844898 l41.5640051,11.4844898 l41.5640051,11.4844898 Z M25.5952551,21.3669898 c26.1302551,22.5057398 26.7502551,23.7119898 27.3315051,24.9457398 c20.3690051,28.0157398 12.9640051,32.1182398 9.1190051,39.3107398 c5.7027551,35.5219898 3.6227551,30.5019898 3.6227551,24.9994898 C3.6227551,24.7907398 3.6265051,24.5819898 3.6327551,24.3744898 c11.0890051,24.3382398 18.4077551,23.4057398 25.5952551,21.3669898 l25.5952551,21.3669898 l25.5952551,21.3669898 Z m36.8915051,27.1957398 c39.9990051,27.1857398 43.2102551,27.6194898 46.1115051,28.3832398 c45.1627551,34.3532398 41.7402551,39.5019898 36.9277551,42.7419898 C35.7802551,37.5232398 34.6865051,32.5294898 32.7527551,27.4944898 c34.0865051,27.2957398 35.4790051,27.1994898 36.8915051,27.1957398 l36.8915051,27.1957398 l36.8915051,27.1957398 Z m28.7965051,28.4719898 c30.7677551,33.5619898 32.3140051,39.1994898 33.3515051,44.6857398 c30.7852551,45.7757398 27.9640051,46.3782398 25.0002551,46.3782398 C20.0565051,46.3782398 15.5040051,44.6982398 11.8827551,41.8794898 c15.7540051,35.5982398 21.7502551,30.8457398 28.7965051,28.4719898 l28.7965051,28.4719898 l28.7965051,28.4719898 Z "id=" Ball-lines "fill=" #C32361 "></path>
</symbol>
<symbol id= "Github-icon" viewbox= "0 0" fill= "#161614" >
<title>GitHub</title>
<desc>github account</desc>
<path d= "M0, 25.633467 c0,36.9584555 7.1625894,46.5651047 17.0969029,49.954576 c18.3477086,50.1906116 18.8035237,49.3991056 18.8035237,48.719323 c18.8035237,48.1119247 18.7820375,46.4990147 18.7697597,44.3605321 C11.8158937,45.9089257 10.3486909,40.9238537 10.3486909,40.9238537 c9.21145523,37.9623936 7.57236256,37.1740347 7.57236256,37.1740347 c5.30249547,35.5847282 7.74425243,35.6161996 7.74425243,35.6161996 c10.2535376,35.7971603 11.5734062,38.2582249 11.5734062,38.2582249 c13.8033703,42.1748424 17.4253353,41.0434451 18.8495657,40.3872661 C19.0767059,38.7318697 19.7228276,37.6020459 20.4364775,36.9616026 c14.8853556,36.314865 9.04877375,34.1150132 9.04877375,24.2927848 c9.04877375,21.494976 10.0233279,19.2054306 11.6225176,17.4147071 c11.3646828,16.766396 10.5067682,14.1589893 11.8680745,10.6310438 c11.8680745,10.6310438 13.9660518,9.9418198 18.7421345,13.2589069 C20.73575,12.6892743 22.875165,12.4060315 25.0007674,12.3950166 c27.124835,12.4060315 29.2627152,12.6892743 31.2594002,13.2589069 C36.0324135, 9.9418198 38.1273213,10.6310438 38.1273213,10.6310438 c39.4916971,14.1589893 38.6337825,16.766396 38.3774824,17.4147071 c39.9797416,19.2054306 40.9466221,21.494976 40.9466221,24.2927848 C40.9466221,34.1401903 35.1008318,36.3069972 29.5328279,36.9411462 c30.4291108,37.7326523 31.2287056,39.2967816 31.2287056,41.688609 c31.2287056,45.1142725 31.198011,47.8790363 31.198011,48.719323 c31.198011,49.4053999 31.6492219,50.2032002 32.9169097,49.9530025 c42.8435495,46.5556633 50,36.9553083 50,25.633467 c50,11.4760513 38.8056724,0 c11.1943276,0 0,11.4760513 0,25.633467 Z "id=" Octocat "></path>
</symbol>
</svg>
</head>
We can achieve these optimizations by turning the group elements into symbol elements. In addition, we can now remove <defs> elements from the SVG sprite, which makes our code better and simpler.
Summarize
Finally, you see that our raster-based icons become very powerful vector based icons that can easily be reused and resized. I hope you will enjoy this tutorial and play SVG in your next project.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
