Top 8 tips for responsive SVGs

Top 8 tips for responsive SVGs

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
  • By using JavaScript and CSS, you can animate the SVG images
  • 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.

3) Consider 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 container. 

4) Use 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 vector effects.

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 layout.


Conclusion:

SVG has been around since late 90’s, but never got much attention. It is still finding its right place in website design and development. Web technologies such as CSS and Javascript have made SVG a powerful tool for interactive graphics. The above tips might look cumbersome, but by integrating those with your workflow, can help you in creating the responsive SVG for the web.

Author Bio

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.

Leave a Reply

Your email address will not be published. Required fields are marked *