CODEWITHSUNDEEP
htmlcsssvg
Anders Östman
Anders Östman

Reputation: 3832

Width and height of SVG as float number

When cropping SVG artwork in Illustrator, the width might become for example 20.121021 px instead of exactly 20.

Is there any know problems that can be caused by float number width/height when using the SVGs in HTML/CSS?. Is there a reason to always save the artwork with width and height as integers?

Upvotes: 1

Views: 1761

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31808

The extra digits add bloat to an SVG file with lots of paths and don't add precision to most drawings. There are a number of svg clean up utilities that allow you to round up/down path coordinates.

Upvotes: 0

Doml The-Bread
Doml The-Bread

Reputation: 1771

Since SVG is a Vector format you can use any width / height you want. It doesn't really matter in which width / height you save your SVG from illustrator, you can simply adjust the size within your css.

Just give your SVG (which is actually a text file starting with an svg tag) an id / class 

<svg class="svg--class">...</svg>

.svg--class { 
    width: 20px;
    height: 20px;
}

so to answer your question: no, there is no problem saving the SVG with float px numbers.

Upvotes: 1

Related Questions