Help to understand SVG coordinates and sizing

Asked

Viewed 339 times

2

I’m trying to set an icone.svg in the system and something went wrong: the icon does not appear on the screen... I think it might be the coordinate system. I’m having doubts about how to resize the images and about that coordinate system.

I don’t quite understand the properties height, width and viewBox.
What happens if you use them together? And what happens if you omit height and width?

Follow the codes:

(the doc svg of the icon heart.svg)

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <symbol id="coracao">
      <path fill="red" d="M401.788,74.476c-63.492-82.432-188.446-33.792-188.446,49.92
            c0-83.712-124.962-132.356-188.463-49.92c-65.63,85.222-0.943,234.509,188.459,320.265
            C402.731,308.985,467.418,159.698,401.788,74.476z" />
    </symbol>
  </defs>

</svg>

(the HTML doc div where I want to place the icone.svg with the size of 50px 50px)

<div id="amei" title="amei">
  <svg viewBox="0 0 50 50">
    <use xlink:href="coracao.svg#coracao" />
  </svg>
</div>

I would like an explanation with details, because so far this nagging doubt has not been resolved.

svg

  • I don’t have time to go into details now (I would like to, but I’m kind of busy) but I already say that for your case will be something like this: <svg viewBox="0 0 430 430"> - if no one gives an elaborate answer, I may post something tomorrow

  • Thank you very much @Bacco, I would like! Nice work meanwhile.

1 answer

3


First of all, it is good to understand that the SVG is practically an infinite frame to draw.

You can draw on any positive or negative X and Y (as long as you do not exceed the numerical capacity of the coordinates), without having to set any size.

In the SVG coordinate system, X increasing to the right, and the Y increasing downwards.

So you can draw a square that goes from 10, 10 until 20, 20, or you can draw the same square as 60, 10 until 70,20.


To viewport

With all this freedom, a mechanism was needed to define which part of the SVG will actually be displayed, and this mechanism is the viewport.

Basically the viewport is defined by the coordinates of the upper left corner of the window, and the width and height.

If you have a circle that goes from -100, -100 to 100, 100 and its viewport for of 0,0 to 200,200, you will only see the right quadrant below the circle, and it will not pass the center of the generated image.

Circle -100, -100 to 100, 100:

original

Viewport 0,0 to 200, 200 of the above image:

Com viewport


To viewbox

To viewbox is a transformation made in the viewport. If we think about viewport as the origin of what will be drawn, the viewbox is the destination.

For example, if our viewport is of 0,0 to 10,10 and our viewbox is 0,0 to 100,100 the original cut-out of the image will be enlarged 10x.

  • the subject is a bit extensive if you go to see it. I don’t promise, but maybe I’ll put more details in the future. If you have any more specific doubts, or something that has not become clear to your immediate need, leave a comment.

  • Got it! viewbox is a zoom in or zoom out. What sets the original size are height and width. The size of the field where the SVG is "drawn", if height and width have not been defined, will be enlarged as the coordinates of the elements need. Then if you draw a length <rect> of 100px, the SVG frame will adopt a width with the same value. And use viewBox to set the "proportional size". Am I right? Anyway, thank you so much @Bacco.

  • The viewport defines the piece of the "infinite frame" that will be shown (as if cutting out this rectangular piece with scissors). The viewbox takes this cropped piece and puts it in the final image (stretched, pressed, original etc).

  • Ok. But if height and width are omitted, what defines such properties is the size of the <svg> elements inside. Right?

  • Here what defines the size is where you insert svg. Usually it "fits" in the space.

  • But here comes the question of alignments. If you put the SVG in a proportion space other than the original, there are other settings that determine if it will be cut, if it will fit, etc. so the ideal is to keep at least the aspect ratio of the viewport. If the viewport has size 200x100, in a 300x150 looks good, pq continues the ratio 2:1 - or in the example I gave, from the heart, from viewport 430x430, in a 50x50 is to appear the whole heart.

  • Right. Well, concisely: What is the effect if the height and width properties are not defined?

  • As I said, it depends on the space you put the svg - if you keep the proportion, it fits. if the ratio is wrong, it depends on several factors, such as alignment, and a series of parameters of the SVG itself. The quiet way to work is to at least keep the ratio.

  • Let’s go continue this discussion in chat.

Show 4 more comments

Browser other questions tagged svg

You are not signed in. Login or sign up in order to post.