Valeurs SVG et viewBox

14

Je suis juste curieux de savoir si quelqu'un sait comment les viewBoxvaleurs (ie viewBox="a b c d") sont déterminées.

J'essaie de comprendre la fonctionnalité SVG d'Inkscape, donc ce que j'ai fait, c'est créer un document dans Inkscape qui est 100pxx 100px, tracer une ligne du côté gauche de la fenêtre (c'est-à-dire la 0valeur horizontale) vers le côté droit (c'est-à-dire la 100valeur horizontale) .

Étrangement, cependant, lorsque j'enregistre ce document comme un fichier SVG brut, puis ouvrez le fichier dans un éditeur de texte, les viewBoxvaleurs sont mises à la viewBox="0 0 26.458333 26.458334"place de, disons, viewBox="0 0 100 100".

Quelqu'un sait-il comment ces valeurs ( 0 0 26.458333 26.458334) sont déterminées et pourquoi il n'y a apparemment aucune relation entre elles et les dimensions de la fenêtre?

PS Je sais que vous pouvez modifier la viewBoxpropriété manuellement dans les options du document, mais je suis toujours curieux de savoir pourquoi Inkscape les définit sur des valeurs géniales.

vieux garçon
la source

Réponses:

19

Inkscape utilise mm comme unité d'affichage ou unité utilisateur par défaut pour votre document. Les unités utilisateur sont utilisées pour stocker des valeurs dans le fichier SVG.

<svg width="100" height="100" viewBox="0 0 26.458333 26.458333">

Cette balise décrit une taille de dessin de 100px x 100px. L'attribut viewBox définit qui 100px x 100pxest équivalent à 26.458333 x 26.458333 user units.

Le facteur d'échelle SVG serait 1px / 0.2645 user-unit, qui peut être utilisé par un moteur de rendu SVG pour convertir toutes les valeurs qui sont stockées dans des unités d'utilisateurs aux réelles dimensions de dessin.


Dans ce cas, Inkscape veut stocker les valeurs dans mm, il doit donc savoir comment se pxrapporte à mm. La spécification CSS décrit que les unités de longueur absolue sont fixes les unes par rapport aux autres:96px = 1in

Ça signifie 100px = 1.041666667in = 2.645833333cm = 26.45833333mm

Voilà d'où 26.45833333vient le.


Si vous voulez Inkscape pour stocker toutes vos valeurs px, vous pouvez modifier les défaut des unités d'affichage ou unités-utilisateur pour pxles propriétés du document (Fichier> Propriétés du document> Onglet: Page d' accueil> Général> Unités d'affichage)

  1. Par défaut, mm:

Propriétés du document mm

  1. Modifié: px:

Propriétés du document px

L'exportation du même document entraînera la balise SVG suivante:

<svg width="100" height="100" viewBox="0 0 100 100">

Maintenant, le facteur d'échelle SVG est 1px / 1 user-unit.

Si vous voulez en savoir plus sur ce sujet, il y a une explication plus détaillée dans le wiki Inkscape

Remarques:

  • Inkscape v0.92 utilise une relation de 96px/in, Inkscape v0.91 et les versions antérieures utilisaient une valeur de90px/in
FWrnr
la source
Sensationnel. Très intéressant. Il y avait donc une rime et une raison. Merci beaucoup d'avoir partagé vos connaissances!
oldboy
Je vais me souvenir de la technique de voile blanc que vous avez utilisée. Normalement, je mets des carrés rouges autour des parties importantes des captures d'écran, la vôtre est tellement plus belle.
aaaaaa