SVG is a compact image container that stores images in a vector format. SVG can be used for a variety of purposes like displaying infographics on a webpage and various other environments. It also supports animations and interactive images. SVG stands for scalable vector graphics. This format has been around for a decade but only became feasible around 2011 when it was extensively used in website design. SVG has a myriad of possibilities when used with CSS and allows a designer to manipulate images on the webpage.
SVG can be animated wholly or partly using Cascading style scripting and Javascript. Despite how old SVG is, designers are still interested in its application and are finding new ways to make it work with CSS. SVG can be brought to life through CSS. In this article, we will explore ways to manipulate SVG with the help of CSS and how we can implement SVG in a webpage.
SVG with CSS
To know why SVG is implemented with CSS instead of traditional image formats we must first compare them. The traditional image containers like PNG, JPS, and GIFs have their disadvantages. While PNG and BMP containers can compress the image with a zip-like compression, effectively retaining all the details, JPG is a lossy compression and removes less noticeable details. But Bitmaps are only suitable for images like photos of any other images that are reproduced. SVG on the other hand are vector graphics that are embedded in the XML.
All the details like dimensions, curves, connectors, straight lines, strokes, color fill-ins, coordinates, etc are drawn with SVG. The viewbox in the SVG attribute tag defines the coordinates. For example, a 2D image with a resolution of 480x800 can be starting from the coordinates 0,0 for which you will simply put the values “0 0 480x800” in the viewbox. If you want to define the color, you can fill the stroke and fill values with your desired color code. To make a border for an image, you can specify the ‘r’ attribute to specify the unit radius.
SVG has thus many advantages over bitmaps. SVGs are infinitely scalable unlike JPG or PNG containers and only take around 150 bytes. You can make them as big or as small as you like while PNG and JPG images will become pixelated at a certain point. SVG images also have a transparent background so you can easily embed them to suit any theme and later manipulate it with CSS scripting. SVG elements can also be manipulated in real-time on the server as well as browser using Java or CSS scripts.
That is why SVG is used extensively in logo designs, icons, and graph diagrams. SVG is however not so practical for photography. Understanding how SVG works at a basic level is essential to be able to use it with CSS scripting. In practice, you will be using different tools like Adobe illustrator, Vectr, SVG editor, Inkscape, etc. All these apps will generate a different SVG code for almost similar-looking SVG images. That is why one should understand the basic working of SVG before using it with CSS.
Using SVG Images as Static Bitmap Images
SVG can be used in your HTML code to be identified as simple bitmap images. But there are several advantages to that. Unlike PNG and JPG, you can scale the SVG image based on the webpage dimensions. You can call for SVG images in the <img> tag or CSS script arguments like Background.
Here is a real-world example:
<imgsrc="Sampleimage.svg"alt="SVG tmp"/>
Or for CSS background for the same image:
/* CSS background */
.myelement{
background-image:url("Sampleimage.svg");}
If you do this, the browser will isolate this part from any links or scripts and will treat the image as a static image. Using CSS, you can also apply other attributes or functions like applying filters or transforming images. You will most likely get a better result if you use SVG images instead of PNGs because of their ability to be scaled to your liking without losing any quality.
Using CSS With SVG Backgrounds
You can directly embed an SVG image in the CSS script using the background to be used as small reusable images. You can use them as high-quality icons and trim down the additional HTTPS requests. This can be done by using the
.mysvgbackground{}
argument inside the script. With an SVG image, you can also use the UTF-8 encoding standard to edit the SVG images easily.
CSS with Responsive SVG Images
When using normal images with CSS, the images are by default the size of their respective containers. In CSS you can change it in the
<img>
tag. This is useful when you are making responsive SVG images.
For example:
img{display: block; max-width:50%; height: 30; }
In the following example, you can adjust the width and height by changing the width and height attributes.
However, the SVG image is different. When you embed an SVG image, its attributes may not be recognized. As a result, the height and width may be calculated as zero and won’t show on the page. To get rid of this problem, always define the height and width in the <svg> tag.
For instance:
<svgxmlns="https://www.samplesite.com/assets/imgs/vctrgrpcs/svg"width="480"height="800">
Manipulating Images Using CSS
SVG images can be placed in the markup. This makes the image part of DOM and can be later controlled using CSS scripts.
For instance:
<p>SVG inlined to HTML markup:</p>
<svgid="sample"xmlns="https://www.samplesite.com/assets/imgs/vctrgrpcs/svg"viewBox="20.4 56.4 19.8 17.8">
<path d="xxx"/>
<p>SVG embedded in DOM</p>
This eliminates the need to define the width or height attributes as you can now directly control the dimensions.
#sample{
display: block;
width:300;
height: auto;
}
#sample path{
stroke-width:0;
fill: #0f8;
}
But specifying the dimensions makes sure that SVG is not improperly resized when no CSS script is applied. SVG elements can then be controlled by the CSS selection tools and modified by SVG attributes.
Consider for example a sample rectangle element:
/* CSS styling for sample rectangle */
rectangle{
stroke-width:50;
stroke: #f07;
fill: #ff7;
}
Do remember though that CSS has a high priority and by default, CSS will override any attributes specified in the SVG. Thus, CSS-based styling can have a lot of benefits for a webpage. It primarily reduces the extra code lines used in the SVG tags. Furthermore, you can use the same CSS styling with any SVG on any number of pages. You can also then apply different attributes to the whole or part of the SVG images to make them more interactive.
SVG in 2D Bitmaps
An SVG container can have more than one image in one file. For example, an icon file for drives can have several separate images for the drive icon.
<svgxmlns=" https://www.samplesite.com/assets/imgs/vctrgrpcs/svg ">
<defs>
<symbol id="Drive"viewBox="0 0 19 19">
<title>Drive</title>
<path d="xxx"></path>
</symbol>
<symbol id="Drive Full"viewBox="0 0 19 19">
<title>Full</title>
<path d="yyy"></path>
</symbol>
<title>click here to download</title>
Here the SVG file contains two icons for drives. One is for a normal drive and the other one for a drive which is full. Each can be targeted using the ID specified in the <symbol> tag. You can call the drive icon from the file as follows:
<svgclass="Drive"viewBox="0 0 56 56">
<use xlink:href="drive.svg#icon-drive"></use>
</svg>
Then you can add some style using the CSS script. For example, you can fill in color by using:
svg.drive{fill: #f7248;}
This method, however, will not work on internet explorer as the styling will only apply to the elements contained in the <svg> tag with use function. The fill will make every icon of the element the same color as defined. To go around this, you can use hiding techniques by embedding the sprite within the HTML. This will work in almost any modern browser. Thus, you can separately control individual elements using CSS.
However, there are some drawbacks. SVG cannot be cached and has to be reproduced at every instance when there is a call to the icon. You can use Ajax to cache the file and inject it after.
Using SVG Effects
SVG has support for different effects like masking, applying filters like shadows, blurring, high contrast, and clipping. These effects can also be found in the CSS effects. You can use the CSS properties like clip-path and mask to target an SVG. You can use them to create different effects like clipping a text and blending it with the background.
Conclusion
SVGs are semantic images that look cleaner and crisper on almost all screen resolutions. That is why it is the top choice of designers to use them in infographics. SVGs can be manipulated using CSS to animate them and make them more attractive. You can style the images in the same way as you would style other images in CSS. Although there are certain limitations when using SVG with CSS, and they may not work on all browsers, it is still a great way to get creative.
This article has given some real-world examples of how you can use CSS to control your SVGs. SVGs are consistent throughout the website and across all platforms. They are easier to create and even easier to modify using CSS. There are many techniques you can use to create SVG icons and sprites and we highly suggest you read more about them.
Ready to innovate? We're here to assist. Contact us today!
