Help to understand SVG coordinates and scaling

Question

Help to understand SVG coordinates and scaling

Navigation

#1 by (3 votes)

2

I'm trying to set an icone.svg on the system and something went wrong: the icon does not appear on the screen ... I think it may be the coordinate system. I am having doubts on how to resize the images and on such a coordinate system.

I did not understand the properties height , width and viewBox . What happens if I wear them together? And what happens if you omit height and width ?

Here are the codes:

(the doc svg of the icone coracao.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 put 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 in detail, because until now this boring doubt has not been remedied.

svg

asked by anonymous 04.01.2017 / 02:58

1 answer

Image in TSpeedButton with TImageList Neural Networks and Artificial Intelligence in PHP? [closed]

score 3 · Accepted Answer

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

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

In the SVG coordinate system, X increases to the right, and Y increases down.

So you can draw a square from 10, 10 to 20, 20 , or you can draw the same square from 60, 10 to 70,20 .

A viewport

With this full freedom, a mechanism was needed to define which part of the SVG to actually display, and this mechanism is viewport .

Basically% w / o% is defined by the coordinates of the upper left corner of the window, and width and height.

If you have a circle ranging from viewport to -100, -100 and your viewport is from 100, 100 to 0,0 , you will only see the right quadrant underneath the circle, and it will not move beyond the center of the generated image.

Circle 200,200 to -100, -100 :

Viewport100,100a0,0imageabove:

A viewbox

The viewbox is a transformation done in viewport . If we think of the viewport as the source of what is to be drawn, the viewbox is the destination.

For example, if our viewport is from 200, 200 to 0,0 and our viewbox is 10,10 a 0,0 the original image clipping will be enlarged 100,100 .