The viewBox attribute for SVG specifies a rectangle in user space.
A list of four numbers: min-x , min-y , width , and height that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio attribute. The presence of the viewBox attribute results in a transformation being applied to the viewport coordinate system.
[ <min-x>,? <min-y>,? <width>,? <height> ]
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="10" viewBox="0 -10 10 20">
<polygon fill="red" points="0,0 -10,0 0,-10"/>
<polygon fill="green" points="0,0 -10,0 0,10"/>
<polygon fill="blue" points="0,0 10,0 0,-10"/>
<polygon fill="yellow" points="0,0 10,0 0,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="10" markerWidth="20" viewBox="-10 0 20 10">
<polygon fill="red" points="0,0 -10,0 0,-10"/>
<polygon fill="green" points="0,0 -10,0 0,10"/>
<polygon fill="blue" points="0,0 10,0 0,-10"/>
<polygon fill="yellow" points="0,0 10,0 0,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="10" viewBox="-10 -10 10 20">
<polygon fill="red" points="0,0 -10,0 0,-10"/>
<polygon fill="green" points="0,0 -10,0 0,10"/>
<polygon fill="blue" points="0,0 10,0 0,-10"/>
<polygon fill="yellow" points="0,0 10,0 0,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg> The viewBox attribute for SVG specifies a rectangle in user space.
A list of four numbers: min-x , min-y , width , and height that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio attribute. The presence of the viewBox attribute results in a transformation being applied to the viewport coordinate system.
[ <min-x>,? <min-y>,? <width>,? <height> ]
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern height="10%" id="myid" viewBox="-10 -10 20 10" width="20%">
<path d="M0 0L-10 0L0 -10" fill="red"/>
<path d="M0 0L-10 0L0 10" fill="green"/>
<path d="M0 0L10 0L0 -10" fill="blue"/>
<path d="M0 0L10 0L0 10" fill="yellow"/>
</pattern>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern height="20%" id="myid" viewBox="0 -10 10 20" width="10%">
<path d="M0 0L-10 0L0 -10" fill="red"/>
<path d="M0 0L-10 0L0 10" fill="green"/>
<path d="M0 0L10 0L0 -10" fill="blue"/>
<path d="M0 0L10 0L0 10" fill="yellow"/>
</pattern>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern height="10%" id="myid" viewBox="-10 0 20 10" width="20%">
<path d="M0 0L-10 0L0 -10" fill="red"/>
<path d="M0 0L-10 0L0 10" fill="green"/>
<path d="M0 0L10 0L0 -10" fill="blue"/>
<path d="M0 0L10 0L0 10" fill="yellow"/>
</pattern>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern height="20%" id="myid" viewBox="-10 -10 10 20" width="10%">
<path d="M0 0L-10 0L0 -10" fill="red"/>
<path d="M0 0L-10 0L0 10" fill="green"/>
<path d="M0 0L10 0L0 -10" fill="blue"/>
<path d="M0 0L10 0L0 10" fill="yellow"/>
</pattern>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/>
</svg> The viewBox attribute for SVG specifies a rectangle in user space.
A list of four numbers: min-x , min-y , width , and height that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio attribute. The presence of the viewBox attribute results in a transformation being applied to the viewport coordinate system.
[ <min-x>,? <min-y>,? <width>,? <height> ]
<svg xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="red" viewBox="0 0 100 50">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="blue" viewBox="0 0 100 200">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="red" viewBox="-50 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="blue" viewBox="50 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="red" viewBox="0 -50 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="blue" viewBox="0 50 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="red" viewBox="0 0 50 100">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg fill="blue" viewBox="0 0 200 100">
<circle cx="50" cy="50" r="50"/>
</svg>
</svg> The viewBox attribute for SVG specifies a rectangle in user space.
A list of four numbers: min-x , min-y , width , and height that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio attribute. The presence of the viewBox attribute results in a transformation being applied to the viewport coordinate system.
[ <min-x>,? <min-y>,? <width>,? <height> ]
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid2" viewBox="0 0 100 50">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid3" viewBox="0 0 100 200">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid2"/>
<use fill="blue" href="#myid3"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid2" viewBox="-50 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid3" viewBox="50 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid2"/>
<use fill="blue" href="#myid3"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid2" viewBox="0 -50 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid3" viewBox="0 50 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid2"/>
<use fill="blue" href="#myid3"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="myid1" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid2" viewBox="0 0 50 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<symbol id="myid3" viewBox="0 0 200 100">
<circle cx="50" cy="50" r="50"/>
</symbol>
<use href="#myid1"/>
<use fill="red" href="#myid2"/>
<use fill="blue" href="#myid3"/>
</svg> The viewBox attribute for SVG specifies a rectangle in user space.
A list of four numbers: min-x , min-y , width , and height that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio attribute. The presence of the viewBox attribute results in a transformation being applied to the viewport coordinate system.
[ <min-x>,? <min-y>,? <width>,? <height> ]
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
<view id="myid1" viewBox="0 0 100 100"/>
<view id="myid2" viewBox="0 0 100 50"/>
<view id="myid3" viewBox="0 0 100 200"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
<view id="myid1" viewBox="0 0 100 100"/>
<view id="myid2" viewBox="-50 0 100 100"/>
<view id="myid3" viewBox="50 0 100 100"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
<view id="myid1" viewBox="0 0 100 100"/>
<view id="myid2" viewBox="0 -50 100 100"/>
<view id="myid3" viewBox="0 50 100 100"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
<view id="myid1" viewBox="0 0 100 100"/>
<view id="myid2" viewBox="0 0 50 100"/>
<view id="myid3" viewBox="0 0 200 100"/>
</svg>