CODEWITHSUNDEEP
javascripthtmlcsssvg
Jhon Donald
Jhon Donald

Reputation: 59

SVG Resize on smaller screen using Javascript

I am trying to figure out how can i resize preserveAspectRatio using JavaScript , i have an art that takes 70% of my screen with viewBox of "0 0 750 500" i tried to change this values to be responsive on all screens but i failed the only way to fix it on desktop screen is using preserveAspectRatio="none" , but when i scale the screen it shrinks to be an ugly art , what i am trying to achieve is how to resize SVG's on smaller screens while SVG has preserveAspectRatio = "none" ?

like this svg :

<svg id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 432.53 432.53" preserveAspectRatio="none">
  <defs>
    <linearGradient id="linear-gradient" y1="216.27" x2="432.53" y2="216.27" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#20c5e0"/>
      <stop offset="1" stop-color="#1be28c"/>
    </linearGradient>
  </defs>
  <circle cx="216.27" cy="216.27" r="213.27" fill="none" stroke-miterlimit="10" stroke-width="6" stroke="url(#linear-gradient)"/>
</svg>

Upvotes: 0

Views: 180

Answers (3)

Alexandr_TT
Alexandr_TT

Reputation: 14585

Wrap the SVG in a parent container and give it a width and height in relative units

preserveAspectRatio = "none" needs to be removed in order for the image to resize proportionally

By default in SVG preserveAspectRatio = "xMidyMid meet"

.container {
width:30vw;
height:30vh;
}
<div class="container">
<svg id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 432.53 432.53" >
  <defs>
    <linearGradient id="linear-gradient" y1="216.27" x2="432.53" y2="216.27" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#20c5e0"/>
      <stop offset="1" stop-color="#1be28c"/>
    </linearGradient>
  </defs>
  <circle cx="216.27" cy="216.27" r="213.27" fill="none" stroke-miterlimit="10" stroke-width="6" stroke="url(#linear-gradient)"/>
</svg>
</div>

Upvotes: 1

Ishita Ray
Ishita Ray

Reputation: 666

You can add Width and height attribute in svg code. Or You can use css also.

<svg id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 432.53 432.53" preserveAspectRatio="none" width="200px" height="200px">
  <defs>
    <linearGradient id="linear-gradient" y1="216.27" x2="432.53" y2="216.27" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#20c5e0"/>
      <stop offset="1" stop-color="#1be28c"/>
    </linearGradient>
  </defs>
  <circle cx="216.27" cy="216.27" r="213.27" fill="none" stroke-miterlimit="10" stroke-width="6" stroke="url(#linear-gradient)"/>
</svg>

Upvotes: 0

Bulent
Bulent

Reputation: 3411

This is not something that should be done with Js. You need to put your SVG in a div, and control that div's dimentions in CSS.

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

.svg-container {
  width: 70%;
}

svg {
  width: 100%;
  height: auto;
}

Upvotes: 0

Related Questions