Tag Archive for: SVG

Fit SVG into its parent

/in , /by

Open example in a new page and resize the result window to check how the SVG is fitted to his parent.

If what you want is to scale SVG backgrounds, you can check it easily on MDN web docs.

Rotate Markers in Google Maps

/in /by

Still as of today (post’s date) you cannot rotate markers in Google Maps, you only can resize them, however if you are using SVGs (what I always recommend) you can do any transformation you want 🙂

Samsung loading screen animation

/in , /by

Blink and Webkit cannot scale SVG

/in , /by

svg

Chrome cannot scale SVG vertically or horizontally.

For this example we will use:

  • Two HTML Tags for images, one without size and the other with a height equal to double width
  • A div container with a CSS background-image
<!-- HTML -->
<img id="a" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg">

<img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg"width="50px" height="100px">

<div></div>
/* CSS */
#a {
    width: 50px;
    height: 100px;
}

div {
    width: 50px;
    height: 100px;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg);
    background-size: 50px 100px;
}

If you try the same code in Firefox it will work for the 3 cases, you will see a vertical strech for this example with height equal to double width. So, if you want to keep the same behaviour in all browsers, you should change size proportionally. Edit the SVG itself if you wish some width and/or height deformations.

See a real example: