Visual test to see different ways to apply dimensions to image.
Using 128 x 128 emoji images for tests, 240 x 512 zmdi-attachment-alt (thin image), 2304 x 1792 fa-cc-jcb (wide image).
| Code | Width | Height | Sample | Explanation | |
|---|---|---|---|---|---|
| No values | <i class="simple-svg" data-icon="zmdi-pause"/> | 0.5em | 1em | If attributes are missing, height is set to 1em. Width is calculated using SVG width/height ratio. |
|
| Using one attribute | <i class="simple-svg" data-icon="zmdi-pause" height="16px"/> | 8px | 16px | Width is calculated using width/height ratio. | |
| Wrong width/height ratio | <i class="simple-svg" data-icon="zmdi-pause" width="32px" height="32px"/> | 32px | 32px | Even though dimensions have different aspect ratio than SVG, image will not be distorted. Image will be scaled down to fit and centered inside 32 x 32 square. |
|
| Using one attribute | <i class="simple-svg" data-icon="zmdi-pause" data-width="2em"/> | 2em | 4em | Height is calculated using SVG width/height ratio. | |
| Using one attribute | <i class="simple-svg" data-icon="zmdi-pause" data-width="32" width="16"/> | 16px | 32px | Width takes priority over data-width. Height is calculated using SVG width/height ratio. |
|
| "auto" in attribute | <i class="simple-svg" data-icon="zmdi-pause" width="auto"/> | 256 | 512 | too large to show | Width is set to original SVG width. Height is calculated using SVG width/height ratio. |
| css with "auto" | <i class="simple-svg" data-icon="zmdi-pause" style="width: auto; max-width: 100%"/> | 0.5em, broken in IE |
1em, broken in IE |
Image will behave differently in Internet Explorer (up to MS Edge 12) than in other browsers. >Never use keyword "auto" in width or height in inline style or css. |
How image dimensions are handled by SimpleSVG:
- You can set dimensions using width and height attributes (<svg width="16px" height="16px").
If one dimension is set, another one is set automatically by SimpleSVG using width/height ratio of original SVG image.
For example, fa-apple size is 1408 x 1792. If you set height="16", width will be automatically set to 20.37 (1792 / 1408 * 16), keeping same width/height ratio as in original image.
- You can also use data-width and data-height attributes. They are aliases for width and height attributes, checked if width or height attributes are missing.
- If width and height attributes are missing, height is set to 1em, width is set to (svg width / svg height)em.
- If width or height attribute (attribute - not css rule!) is set to "auto", dimensions will be set to original svg dimensions.
- You can set dimensions using stylesheet or inline style attribute, but these dimensions will not be parsed by SimpleSVG.
Never use keyword "auto" when setting SVG width or height via stylesheet or inline style. Internet Explorer (MS Edge 12) cannot handle it.
Tests using only height:
- data-height="32px"
- height="32px"
- style="height: 32px;"
Tests using only width:
- data-width="32px"
- width="32px"
- style="width: 32px;"
Both width and height:
- data-width="32px" data-height="32px"
- width="32px" height="32px"
- style="width: 32px; height: 32px;"
Automatic dimensions:
- BAD EXAMPLE: style="width: auto;"
Width and height in inline style aren't parsed, so this will be shown as is. Height is set to 1em when its missing, so images should be 1m (16px) high.
DO NOT EVER use width:auto or height:auto in stylesheet for SVG images. Internet Explorer cannot handle automatic width or height for SVG. Unfortunately there are still people using that browser.
- width="auto" or height="auto" (or data-width or data-height)
This will behave differently than you would expect.
Using width="auto" or height="auto" will set dimensions of icon to dimensions SVG icon was designed with. "auto" is a special keyword in SimpleSVG parser, it is applied only when used in width, height, data-width or data-height attribute.
Best way to set dimensions for SVG? Either use both width and height or use (data-)height attribute.
NEVER set width to auto in CSS, it will mess up layout in Internet Explorer.