How to make SVG image a specific size when responsive screen hits certain display?

Question

I don't know if I need to use javascript or not, but any idea how I can make a SVG image a specific size when the screen hits a certain display (example, 640×480 pixels)?

My SVG image is already responsive, but I want it to appear smaller in the mobile display.

thanks!

Answer 1

You could have a section in your CSS something like:

@media screen and (max-width: 480px) {

  svg {
    max-width: 200px;
    max-height: 200px;
  }

}

Answer 2

markup

  <svg 
    width="120" 
    height="120" 
    viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="1000" height="1000"/>
  </svg>

</div>

styles

svg { /* make it generally responsive */
  display: block;
  width: 100%;
  height: 100%;
}

.box {
  max-width: 300px;
}

@media (min-width: 600px) { /* when 600px and bigger */
  .box {
    max-width: 200px;
  }
}

https://jsfiddle.net/sheriffderek/z9fw1ndr/