Question 184049 in Html Question posted in
Some basic documentation can be found here.

Html – How to enlarge an SVG and keep its ratio

I have this code

<svg width="325" height="250" viewBox="20 40 2 555" style="outline: 1px solid #666;">
 <path data-map-id="1" style="fill: #d9534f" class="st3" d="M345.1,302.4V276c0-3.5,2.8-6.3,6.3-6.3h20.3v32.7H345.1z"/>
</svg>

I want this to appear much larger by %200. I read and tried several, what seems to be solutions, but I can’t seem to get it it work. The goal is, when the user selects this ‘block’ the path is generated onto another page, but I need to increase the size – seems smple enough…right? Any help would be much appreciated.

I tried manipulating the width and height using css and inline style, but to no avail

Tags:

2

Answers


  1. 0

    Try these:

    1. Set the missing viewbox and fill in the height and width values of
      the set height and height attributes in the svg tag

    2. Then scale the picture simply by setting the height and width to the
      desired percent values. Good luck.

    3. Set a fixed aspect ratio with preserveAspectRatio="X200Y200 meet
      (e.g. 200px), but it’s not necessary

    Login or Signup to reply.
  2. 0

    seems simple enough…right?

    Just a Smop (Small matter of programming)

    Now you did not give quite enough ground rules as to MWE (Minimal Working Exception)

    Lets try to enlarge the source blob 200% to make the green one, and here is the correct way with those untold assumptions that

      1. the centroids are the same
      1. the widow stays the same
        (but note I had to push the envelope out 5 units to the right, to keep in viewport)

    enter image description here

    <html><head></head><body>
<div>
<svg width="325" height="250" viewBox="25 40 2 555" style="outline: 1px solid #666;">

<--! new object width = 2 x (6.3+20.3) -->
<--! new Mx & H offset = 345.1-13.3 = 331.8 -->
<--! new object height = 2 x (32.7) -->
<--! new My offset = 302.4 + (65.4-12.6)/2 = 328.8 -->
<--! new V offset = 276 + 6.3 - (32.7/2) = 265.95 -->
<--! others generally X 200% -->


<path data-map-id="2" style="fill: #00ff00" class="st3" 
d="
M 331.8, 328.8
V 265.95
c 0-7,5.6-12.6,12.6-12.6
h 40.6
v 65.4
H 331.8
z"/>

<path data-map-id="1" style="fill: #d9534f" class="st3" 
d="
M 345.1, 302.4
V 276
c 0-3.5,2.8-6.3,6.3-6.3
h 20.3
v 32.7
H 345.1
z"/>


</svg>
</div>
</body></html>

    However the simplest since we have a scalable object is scale up by 2 using a transform, and adjust viewport to suit.

    <html><head></head><body>
<div>
<svg width="325" height="250" viewBox="375 330 2 555" style="outline: 1px solid #666;">

<g transform="scale(2)">

 <path data-map-id="1" style="fill: #d9534f" class="st3" d="M345.1,302.4V276c0-3.5,2.8-6.3,6.3-6.3h20.3v32.7H345.1z"/>

</g>
</svg>

</div>
</body></html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search