Introduction
This chapter demonstrates about the SVG Sprites Now a days majority of images are using iconography and logos are using with CSS backgrounds, following are the concepts covered in this chapter.
- Image SVG Sprite
- Inline SVG Sprite
- Embedding SVGs as Background in CSS
Description
SVG Image sprite now a days defined as the majority of images which are like icongraphy and logos. Each of these images request an HTTP request in which browser must request the image file from the web sever then web server will send back a response along with the file so the browser can download and render it.
If there are more images are present for thus forth will be required and which can cause a major performance hit for the website for these reasons many developers are using image sprites.
Image Sprites are the single image files combining with many different images and which are used where SVGs are possible and things like logos and icons are prime use cases but adding them in a responsible manner is mandatory. The code below demonstrates the single image file combining with many images.
[html]
<html>
</body>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<g class="sprite" id="circle">
<ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />
</g>
<g class="sprite" id="square">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" />
</g>
<g class="sprite" id="triangle">
<path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />
</g>
<g class="sprite" id="polygone">
<path="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="black" stroke-width="0.75"/>
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Description
The code for each individual image within the sprite is wrapped in a symbol element. SVG Sprites found near the opening of the body tag. The code below demonstrates the SVG Inline sprites. User can also grab the view box attribute from the outer SVG and add it to the symbol element.
[html]
<html>
<head>
<title>CSS Sprites</title>
</head>
<body>
<h1>SPLessons..!</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="128" viewBox="0 0 32 128">
<defs>
<g id="icon-twitter">
<path class="path1" d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" />
</g>
<g id="icon-dribbble">
<path class="path1" d="M23.927 7.073c-0.215 0.306-2.015 2.726-6.267 4.32-1.96-3.6-4.131-6.558-4.462-7 0.899-0.217 1.837-0.332 2.802-0.332 3.038 0 5.815 1.14 7.927 3.013zM16.836 16.123c-6.167 1.994-9.449 7.427-9.72 7.891-1.91-2.12-3.074-4.924-3.074-7.996 0-0.122 0.002-0.244 0.006-0.366 0.523 0.011 6.318 0.085 12.29-1.702 0.342 0.67 0.669 1.35 0.97 2.029-0.158 0.045-0.315 0.092-0.471 0.142zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 30c-7.72 0-14-6.28-14-14 0-7.72 6.28-14 14-14 7.72 0 14 6.28 14 14 0 7.72-6.28 14-14 14zM19.372 14.903c-0.248-0.583-0.515-1.162-0.793-1.732 4.421-1.805 6.425-4.374 6.677-4.715 1.665 2.035 2.674 4.627 2.7 7.449-0.394-0.083-4.348-0.885-8.327-0.385-0.084-0.205-0.17-0.41-0.258-0.617zM15.35 12.112c-5.594 1.485-10.52 1.464-11.055 1.457 0.775-3.711 3.276-6.795 6.622-8.373 0.315 0.432 2.452 3.394 4.434 6.916zM18.041 17.984c0.026-0.009 0.052-0.018 0.079-0.027 1.679 4.363 2.373 8.019 2.551 9.068-1.436 0.611-3.015 0.95-4.671 0.95-2.764 0-5.313-0.943-7.34-2.524 0.215-0.44 2.636-5.117 9.381-7.468zM20.358 17.405c3.747-0.6 7.040 0.382 7.449 0.511-0.533 3.327-2.443 6.201-5.126 8.015-0.123-0.727-0.759-4.228-2.323-8.526z" />
</g>
<g id="icon-github">
<path class="path1" d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM25.502 25.502c-1.235 1.235-2.672 2.204-4.272 2.881-0.406 0.172-0.819 0.323-1.238 0.453v-2.398c0-1.26-0.432-2.188-1.297-2.781 0.542-0.052 1.039-0.125 1.492-0.219s0.932-0.229 1.438-0.406 0.958-0.388 1.359-0.633 0.786-0.563 1.156-0.953 0.68-0.833 0.93-1.328 0.448-1.089 0.594-1.781 0.219-1.456 0.219-2.289c0-1.615-0.526-2.99-1.578-4.125 0.479-1.25 0.427-2.609-0.156-4.078l-0.391-0.047c-0.271-0.031-0.758 0.083-1.461 0.344s-1.492 0.688-2.367 1.281c-1.24-0.344-2.526-0.516-3.859-0.516-1.344 0-2.625 0.172-3.844 0.516-0.552-0.375-1.075-0.685-1.57-0.93-0.495-0.245-0.891-0.411-1.188-0.5s-0.573-0.143-0.828-0.164-0.419-0.026-0.492-0.016-0.125 0.021-0.156 0.031c-0.583 1.479-0.635 2.839-0.156 4.078-1.052 1.135-1.578 2.51-1.578 4.125 0 0.833 0.073 1.596 0.219 2.289s0.344 1.286 0.594 1.781 0.56 0.938 0.93 1.328 0.755 0.708 1.156 0.953 0.854 0.456 1.359 0.633 0.984 0.313 1.438 0.406 0.95 0.167 1.492 0.219c-0.854 0.583-1.281 1.51-1.281 2.781v2.445c-0.472-0.14-0.937-0.306-1.394-0.5-1.6-0.677-3.037-1.646-4.272-2.881-1.235-1.235-2.204-2.672-2.881-4.272-0.7-1.655-1.055-3.414-1.055-5.23s0.355-3.575 1.055-5.23c0.677-1.6 1.646-3.037 2.881-4.272s2.672-2.204 4.272-2.881c1.655-0.7 3.415-1.055 5.23-1.055s3.575 0.355 5.23 1.055c1.6 0.677 3.037 1.646 4.272 2.881 1.235 1.235 2.204 2.672 2.881 4.272 0.7 1.655 1.055 3.415 1.055 5.23s-0.355 3.575-1.055 5.23c-0.677 1.6-1.646 3.037-2.881 4.272z" />
</g>
</defs>
<g>
<use fill="#6fbc6d" xlink:href="#icon-treehouse" transform="translate(0 0)"></use>
<use fill="#5fa9dd" xlink:href="#icon-twitter" transform="translate(0 32)"></use>
<use fill="#f46899" xlink:href="#icon-dribbble" transform="translate(0 64)"></use>
<use fill="#222222" xlink:href="#icon-github" transform="translate(0 96)"></use>
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Inline SVG sprites will take up space by default which result in empty space at the top of the page. In order to reference images from the sprite each of the symbol elements require an ID. User need to place an SVG element in users code with a nested use element referencing the desired graphics symbol ID. Adding the images to the sprite is a very easy process user can just copy the code, paste it in and then give it an id then move into the lives.
Description
embedding SVGs as backgrounds is the another way to handle the SVG sprites is to embed into a style sheet as a background images using data URIs. In these user no need to add the external style sheets, user need to generate the data URL for the image then add some simple CSS to make sure our background image is displayed correctly and finally add HTML element to display. The code below demonstrates the embedding the SVGs background in CSS.
[html]
<html>
<head>
<title>CSS Sprites</title>
<style>
body {
font: 1.2em/1.5 sans-serif;
text-align: center;
padding-top: 30px;
}
.social {
list-style-type: none;
margin: 0;
padding: 0;
}
.social li {
display: inline-block;
margin: 0 5px;
}
/* Icons */
[class^="icon-"] {
display: block;
width: 32px;
height: 32px;
background: url('images/sprites.svg');
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.icon-twitter {
background-position: 0 -32px;
}
.icon-dribbble {
background-position: 0 -64px;
}
.icon-github {
background-position: 0 -96px;
}
</style>
</head>
<body>
<h1>SPLessons..!</h1>
<svg width="32" height="128" viewBox="0 0 32 128">
<defs>
<g id="icon-twitter">
<path class="path1" d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" />
</g>
<g id="icon-dribbble">
<path class="path1" d="M23.927 7.073c-0.215 0.306-2.015 2.726-6.267 4.32-1.96-3.6-4.131-6.558-4.462-7 0.899-0.217 1.837-0.332 2.802-0.332 3.038 0 5.815 1.14 7.927 3.013zM16.836 16.123c-6.167 1.994-9.449 7.427-9.72 7.891-1.91-2.12-3.074-4.924-3.074-7.996 0-0.122 0.002-0.244 0.006-0.366 0.523 0.011 6.318 0.085 12.29-1.702 0.342 0.67 0.669 1.35 0.97 2.029-0.158 0.045-0.315 0.092-0.471 0.142zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 30c-7.72 0-14-6.28-14-14 0-7.72 6.28-14 14-14 7.72 0 14 6.28 14 14 0 7.72-6.28 14-14 14zM19.372 14.903c-0.248-0.583-0.515-1.162-0.793-1.732 4.421-1.805 6.425-4.374 6.677-4.715 1.665 2.035 2.674 4.627 2.7 7.449-0.394-0.083-4.348-0.885-8.327-0.385-0.084-0.205-0.17-0.41-0.258-0.617zM15.35 12.112c-5.594 1.485-10.52 1.464-11.055 1.457 0.775-3.711 3.276-6.795 6.622-8.373 0.315 0.432 2.452 3.394 4.434 6.916zM18.041 17.984c0.026-0.009 0.052-0.018 0.079-0.027 1.679 4.363 2.373 8.019 2.551 9.068-1.436 0.611-3.015 0.95-4.671 0.95-2.764 0-5.313-0.943-7.34-2.524 0.215-0.44 2.636-5.117 9.381-7.468zM20.358 17.405c3.747-0.6 7.040 0.382 7.449 0.511-0.533 3.327-2.443 6.201-5.126 8.015-0.123-0.727-0.759-4.228-2.323-8.526z" />
</g>
<g id="icon-github">
<path class="path1" d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM25.502 25.502c-1.235 1.235-2.672 2.204-4.272 2.881-0.406 0.172-0.819 0.323-1.238 0.453v-2.398c0-1.26-0.432-2.188-1.297-2.781 0.542-0.052 1.039-0.125 1.492-0.219s0.932-0.229 1.438-0.406 0.958-0.388 1.359-0.633 0.786-0.563 1.156-0.953 0.68-0.833 0.93-1.328 0.448-1.089 0.594-1.781 0.219-1.456 0.219-2.289c0-1.615-0.526-2.99-1.578-4.125 0.479-1.25 0.427-2.609-0.156-4.078l-0.391-0.047c-0.271-0.031-0.758 0.083-1.461 0.344s-1.492 0.688-2.367 1.281c-1.24-0.344-2.526-0.516-3.859-0.516-1.344 0-2.625 0.172-3.844 0.516-0.552-0.375-1.075-0.685-1.57-0.93-0.495-0.245-0.891-0.411-1.188-0.5s-0.573-0.143-0.828-0.164-0.419-0.026-0.492-0.016-0.125 0.021-0.156 0.031c-0.583 1.479-0.635 2.839-0.156 4.078-1.052 1.135-1.578 2.51-1.578 4.125 0 0.833 0.073 1.596 0.219 2.289s0.344 1.286 0.594 1.781 0.56 0.938 0.93 1.328 0.755 0.708 1.156 0.953 0.854 0.456 1.359 0.633 0.984 0.313 1.438 0.406 0.95 0.167 1.492 0.219c-0.854 0.583-1.281 1.51-1.281 2.781v2.445c-0.472-0.14-0.937-0.306-1.394-0.5-1.6-0.677-3.037-1.646-4.272-2.881-1.235-1.235-2.204-2.672-2.881-4.272-0.7-1.655-1.055-3.414-1.055-5.23s0.355-3.575 1.055-5.23c0.677-1.6 1.646-3.037 2.881-4.272s2.672-2.204 4.272-2.881c1.655-0.7 3.415-1.055 5.23-1.055s3.575 0.355 5.23 1.055c1.6 0.677 3.037 1.646 4.272 2.881 1.235 1.235 2.204 2.672 2.881 4.272 0.7 1.655 1.055 3.415 1.055 5.23s-0.355 3.575-1.055 5.23c-0.677 1.6-1.646 3.037-2.881 4.272z" />
</g>
</defs>
<g>
<use fill="#6fbc6d" xlink:href="#icon-treehouse" transform="translate(0 0)"></use>
<use fill="#5fa9dd" xlink:href="#icon-twitter" transform="translate(0 32)"></use>
<use fill="#f46899" xlink:href="#icon-dribbble" transform="translate(0 64)"></use>
<use fill="#222222" xlink:href="#icon-github" transform="translate(0 96)"></use>
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Key Points
- Sprites do not requires http request.
- Inline elements are present with in the single tag.
- User can embed the SVG style sheets by using data URIs.