Le viewbox SVG est toujours relatif à sa taille ?

Question

Un exemple assez simple si j'ai ce SVG carré :

<svg class="svg-correct-symbol" viewBox="0 0 442.533 442.533"
    width="50px" height="50px">

Et je le change en :

<svg class="svg-correct-symbol" viewBox="0 0 200 200"
        width="50px" height="50px">

Je verrai environ un quart de l'image, n'est-ce pas ? Parce que la largeur et la hauteur sont divisées par deux par rapport à la taille de l'image. window(viewbox) à travers lequel vous regardez pour voir le SVG.

Ainsi, le nombre de viewbox : 442.533 signifiera toujours 100% de la largeur/hauteur des images.

Comment ce numéro de viewbox par défaut est-il défini ? La taille de cette fenêtre est-elle déterminée par la taille du fichier lorsque vous l'exportez ? J'aimerais avoir une boîte de visualisation de quelque chose de plus arrondi comme viewBox="0 0 16 16" .

Avec une image déjà exportée, je ne vois pas comment la modifier.

Answer 1

Il n'y a pas de défaut viewBox numéro. Il est défini au moment de la création de l'image svg (manuellement ou à l'aide d'un logiciel comme illustrator). Il a 4 coordonnées x y width height . Ce qui rend la situation délicate, c'est que ces coordonnées n'ont rien à voir avec la dimension de l'image et, comme vous l'avez mentionné, elles ne font que définir la zone à travers laquelle vous regardez.

Vous pouvez définir le viewbox aux valeurs que vous souhaitez. Mais vous devrez également scale l'image svg pour l'adapter à votre nouvelle fenêtre. De même, vous pouvez avoir besoin de translate / déplacer les images dans le x , y pour l'amener au centre ou pour l'adapter au cadre / viewbox .

Regardez les svg transformer de la documentation. Ce site Le tutoriel peut également être utile pour comprendre les transformations svg.

Si vous utilisez un logiciel tel qu'Illustrator, il vous suffit de définir la dimension du tableau qui définit la boîte de visualisation, puis de la mettre à l'échelle en conséquence.