So ändern Sie die SVG-Skalierung (Zeichenfläche)

Question

Wenn Sie ein SVG mit Illustrator exportieren, wird eine Viewbox erstellt, die meiner Meinung nach der Größe der Zeichenfläche oder der Größe des Elements entspricht, das Sie exportieren. Ich habe derzeit keinen Zugang zum Illustrator, aber ich werde es später versuchen.

Anyways ich denke, dass, wenn Sie etwas exportieren die ViewBox entweder auf die Zeichenfläche der Elementgröße gesetzt wird. Sagen wir einfach, ich habe eine Zeichenfläche von 160 x 160 px und ich exportiere und SVG, die eine viewBox von viewBox="0 0 160 160" haben wird.

Wenn ich nicht mit der Viewbox durcheinander komme, kann ich sagen, dass es ein 16x16 Icon ist. In diesem Fall viewBox="0 0 160 160" noch übersetzt Art zu:

viewBox="0 0 100% 100%"

Wenn ich die viewBox so etwas wie viewBox="0 0 80 80" ändern waren ich genau ein Viertel des Bildes sichtbar zu mir, die sehr viel Sinn macht.

Ausgenommen das Basisbild wird immer 160 mal 160 sein, was die viewBox sein muss. Ich denke, Sie können wahrscheinlich die Standard 160 by 160 ViewBox ändern, wenn Sie in einer kleineren Zeichenfläche exportieren. Aber wie würdest du das im Code machen?

Hoffentlich bekommen Sie das Konzept.

Es bezieht sich etwas dazu, obwohl es eine andere Sache ist.

https://css-tricks.com/svg-artboard-sizing/

Answer 1

Lassen Sie das allein viewBox. Fügen Sie einfach width und height Attribute zu Ihrem <svg> Tag hinzu. Hier ist ein einfaches Beispiel:

<!-- little blue circle: --> 
 
<svg viewBox="0 0 160 160" width="16" height="16"> 
 
    <circle cx="80" cy="80" r="80" fill="blue" stroke="none"/> 
 
</svg> 
 

 
<!-- huge red circle: --> 
 
<svg viewBox="0 0 160 160"> 
 
    <circle cx="80" cy="80" r="80" fill="red" stroke="none"/> 
 
</svg>