#Svg icon resize code#

#Svg icon resize code#

The same code can be integrated locally as a gulp or Grunt task (opens in new tab). Typically, you can save around 20 to 80 per cent in file size. Whatever tool you use to create your SVG content, it's still worthwhile processing its output through a tool like SVGOMG (opens in new tab), which will trim the code markedly. Optimise and minify SVG outputĪ combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly Instead, you can follow the suggestions laid out in the third golden rule. If you're processing a lot of SVGs, or are in a rush, you don't need to complete this step by hand. This makes the SVG fully responsive in modern browsers. The only required code at the start of most SVG files is the following: įor our purposes, the most important aspect is the removal of the width and height attributes that most applications include automatically. Most apps add a lot of proprietary, unnecessary code in their SVG export. Alternatively, for detailed work I'd suggest a plugin like Astute Graphics' VectorScribe. If you're given vector files that do not follow this rule, don't worry – most vector art applications have a 'simplify' option you can use to reduce the number of points in an element without changing its shape.

Many new designers assume more points is better, when the reverse is actually true: a few points, placed well, provide greater control over an element, while also reducing file size. Similarly, draw vector shapes using as few points as possible. This extreme precision is entirely unnecessary, and only adds to code bloat and file size, so it's better to truncate it at this point. SVG doesn't think in integers, so a vector point can have a value of 1.45882721px. Responsiveness and performance are closely related, so set the decimal precision to be no more than two points. Instead, leave at least 2px clear wherever the edge of the canvas comes close to an element. Antialiasing will still be applied to the SVG, and cutting it too close may also crop out the antialiasing. At the same time, don't crop the canvas area to the exact edges of elements.