SVG viewbox & preserveAspectRatio
svg`
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: 300px; height: 200px; background: white; border: 1px solid green;"
viewBox="${viewBox.vx} ${viewBox.vy} ${viewBox.vw} ${viewBox.vh}"
preserveAspectRatio="${preserveAspectRatio.align} ${preserveAspectRatio.meetOrSlice}"
>
<!--Face-->
<circle cx="100" cy="100" r="90" fill="#39F" />
<!--Eyes-->
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black"/>
<!--Smile-->
<path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" />
<rect
x=${viewBox.vx} y=${viewBox.vy}
width=${viewBox.vw} height=${viewBox.vh}
stroke="red" fill="none" stroke-width="3"/>
</svg>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
