Skip to content

Instantly share code, notes, and snippets.

@tacigar

tacigar/viewBox.html

Created August 8, 2021 00:17
Show Gist options
  • Save tacigar/4741e9ed06678b124fa8e70edefafae2 to your computer and use it in GitHub Desktop.
Save tacigar/4741e9ed06678b124fa8e70edefafae2 to your computer and use it in GitHub Desktop.
Download ZIP
viewBox
Raw
viewBox.html
<!DOCTYPE html>
<html>
<body>
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 80 80" width="40" height="120">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 80 80" width="40" height="120">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 80 80" width="40" height="120">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 80 80" width="120" height="40">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 80 80" width="120" height="40">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 80 80" width="120" height="40">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 80 80" width="40" height="120">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 80 80" width="40" height="120">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 80 80" width="40" height="120">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 80 80" width="120" height="40">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 80 80" width="120" height="40">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 80 80" width="120" height="40">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 80 80" width="40" height="120">
<circle cx="40" cy="40" r="40" />
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 80 80" width="120" height="40">
<circle cx="40" cy="40" r="40" />
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment