Scaling an SVG with complex animation paths

Question

I have this code for an SVG on my page. It's a track and I have a car that scrolls along the path as you go down the page.

This functions very well as-is. My main issue is I have built the page to align with the track. This means that the end of the track perfectly aligns with the last section of the page. The problem is, when you make the page smaller the track shrinks in size.

Currently I have tried doing this:

.my-svg-container{
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 38.5%; /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */

  vertical-align: middle; /* top | middle | bottom ... do what you want */
 }


 .my-svg{ /* svg into : object, img or inline */
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%; /* only required for  */
 }

However this seems to have no effect on the responsiveness.

So is it possible to basically make this scale, but retain its position on the page? The height seems to be the main issue; positioning seems to be intact, but the height shrinks so everything isn't aligned any more.

Thanks! Let me know if you need more info

Miguel Ventura · Accepted Answer

You are scaling the SVG image proportionally, which means that when the width changes (to adapt to the page width), the height must also change to keep the image proportions.

In part this is what you want, because scaling the image disregarding proportions would cause your traffic sign or the car to become stretched. On the other hand you want to keep the road height fixed, so here are your alternatives:

Alternative 1 — don't scale the image

This may seem counter to what you're looking for but it's definitely worth considering. You're not scaling the text around which the image revolves, so why scaling the image at all? Just keep both centered with constant size.

Alternative 2 — scale parts of your SVG separately

You can split your SVG into the parts you want with fixed proportion (like the traffic sign and vertical parts of roads) and variable proportion (like horizontal roads). You can use the preserveAspectRatio and viewBox attributes to. There's an example here (works on Chrome but not on current Firefox).

Alternative 3 — scale in discrete steps

If you really want the image to become bigger on a larger display, but don't feel like going through the complexity of alternative 2, you can prepare several SVGs for several width / height ratios and use media queries to display the appropriate one for the appropriate width interval.

Scaling an SVG with complex animation paths

Answers (2)

Related Questions