Top 8 tips for responsive SVGs
The trend of creating
responsive website design has drastically increased due to a rapid increase inmobile usage. The
number of smartphone users worldwide is expected to touch 2.5 billion mark by
2019. In the US alone, the number is predicted to reach 247.5 million.
This clearly states that websites that are not responsive to mobile
devices will surely lose desired user engagement. Google strongly recommends
having a responsive website as they are more likely to attract the attention of
the target audience.
One of the greatest ways to create a responsive website design is using SVG. Before we discuss how to use SVG, let’s first understand what exactly this is. Scalable Vector Graphics (SVG) is an XML based file format that automatically fits into the web pages. SVG files are lighter than file formats such as JPG and PNG. Here are a few advantages of using SVG files:
- SVG files are infinitely scalable without losing the quality.
- SVG makes your website SEO friendly
- Since SVG files are lightweight, it increases the loading speed of your ads or campaigns
- SVG images look good on all platforms
- SVG allows you to change the color and add custom elements and shapes in the design
- SVGs solve the issues with special characters
Top Tips for Responsive SVGs
1) Eliminate the width and height attributes: Most of the companies add propriety codes while exporting the SVG files. By eliminating the width and height attributes, you contribute to the effort in making your SVG file more responsive. However, most applications include these attributes automatically. If you are processing plenty of SVG files, then you don’t need to do it manually. In that case, you can follow the idea listed in our next step.
2) Optimizing SVG content: No matter which tool you are using to generate the SVG content, it is always advisable to optimize the content using SVGOMG tool. The tool not only helps you to trim the code but also gives you a live preview of how your SVG will look after optimization.
SVG for hero text: At present, no CSS standard allows text to adjust
according to its container. You can resize the text using VW and VH units. But
that will require the integration of at least two media queriesto fix the text at a specific area. The
SVG text has the benefit of resizing automatically according to the
vector-effects to keep hairlines thin: With the help of viewport, SVG
scales everything, even the width of the stroke. You can set the thickness of
hairlines by using the width-stroke. Because of the variation in the size of
the diagrams, the thickness might get increased or decreased. But you can prevent it by using the
5) Remember bitmaps: Some developers think that we cannot insert other formats in our SVG elements like BMP, JPEG, WebP. But as long as you are following these tips, the images of these formats will become responsive by adding bitmaps using the <img> tag6) Modify code for Internet Explorer: We have discussed above to optimize the SVG content to make it responsive in modern browsers. Using SVG images as <img src=”countdown.svg alt=”Countdown”> will put forth a few issues that need to be addressed. By using CSS attribute selector, we can make IE9-11 display the correct images.
7) Organize your tools precisely: As artisans hone their tools before they begin work, professionals working with SVG need to set the application to render vector file format in an optimized and efficient manner. There are a few things that need to take care of:
- To define proportional sizes, consider using percentage values instead of absolute values; like pixels, rems, ems etc. These absolute values might work but can cause an issue with accessibility.
- Don’t set your canvas too big. Unlike bitmap images, space in SVG won’t get used. Also, don’t crop images too close as it may cut the anti-aliasing as well.
- Set the decimal precision not more than two points. Anything larger than that can add bloat to the code thus increasing the file size.
- Consider few essential points while
creating images. This will help you in providing better control over the
elements and also reduce the file size.
- Integrate media queries into SVG:
Media queries are a great technique that provides tailor-made sheets to
different devices. Many developers don’t have the idea that media queries can
be embedded within SVG itself. With the help of media queries, one can hide the
elements, change the font size, and create responsive menus and flexible
Anne Carton is a small business consultant, designer and an enthusiast blogger working with Designhill, one of the fastest-growing custom design marketplace. She has authored several blogs, articles and editorials on various topics related to logo, business card maker, book cover design, brochure design, interactive content, concerning design, social media strategies, growth hack strategies, digital marketing and e-commerce.