SVG HTML
Preserve Aspect Ratio - Slice
PreserveAspectRatioSlice.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net's HTML</title>
<style>
svg text {
font-family: Times New Roman;
}
</style>
</head>
<body>
<div style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;float:left;">
<svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 3 3">
<defs>
<g id="idGrid">
<rect x="-1.5" y="-1.5" width="3" height="3" fill="beige" stroke="black" stroke-width=".005"/>
<line x1="-1" y1="-1" x2="1" y2="-1" stroke="black" stroke-width=".005"/>
<text x="-1.25" y="-.96" fill="black" style="font-size:.12px;text-anchor:middle;">-1</text>
<text x="1.25" y="-.96" fill="black" style="font-size:.12px;text-anchor:middle;">-1</text>
<line x1="-1" y1="-.8" x2="1" y2="-.8" stroke="black" stroke-width=".005"/>
<text x="-1.25" y="-.76" fill="black" style="font-size:.12px;text-anchor:middle;">-.8</text>
<text x="1.25" y="-.76" fill="black" style="font-size:.12px;text-anchor:middle;">-.8</text>
<line x1="-1" y1="-.6" x2="1" y2="-.6" stroke="black" stroke-width=".005"/>
<text x="-1.25" y="-.56" fill="black" style="font-size:.12px;text-anchor:middle;">-.6</text>
<text x="1.25" y="-.56" fill="black" style="font-size:.12px;text-anchor:middle;">-.6</text>
<line x1="-1" y1="-.4" x2="1" y2="-.4" stroke="black" stroke-width=".005"/>
<text x="-1.25" y="-.36" fill="black" style="font-size:.12px;text-anchor:middle;">-.4</text>
<text x="1.25" y="-.36" fill="black" style="font-size:.12px;text-anchor:middle;">-.4</text>
<line x1="-1" y1="-.2" x2="1" y2="-.2" stroke="black" stroke-width=".005"/>
<text x="-1.25" y="-.16" fill="black" style="font-size:.12px;text-anchor:middle;">-.2</text>
<text x="1.25" y="-.16" fill="black" style="font-size:.12px;text-anchor:middle;">-.2</text>
<line x1="-1" y1="0" x2="1" y2="0" stroke="black" stroke-width=".005"/>
<text x="-1.25" y=".04" fill="black" style="font-size:.12px;text-anchor:middle;">0</text>
<text x="1.25" y=".04" fill="black" style="font-size:.12px;text-anchor:middle;">0</text>
<line x1="-1" y1=".2" x2="1" y2=".2" stroke="black" stroke-width=".005"/>
<text x="-1.25" y=".24" fill="black" style="font-size:.12px;text-anchor:middle;">.2</text>
<text x="1.25" y=".24" fill="black" style="font-size:.12px;text-anchor:middle;">.2</text>
<line x1="-1" y1=".4" x2="1" y2=".4" stroke="black" stroke-width=".005"/>
<text x="-1.25" y=".44" fill="black" style="font-size:.12px;text-anchor:middle;">.4</text>
<text x="1.25" y=".44" fill="black" style="font-size:.12px;text-anchor:middle;">.4</text>
<line x1="-1" y1=".6" x2="1" y2=".6" stroke="black" stroke-width=".005"/>
<text x="-1.25" y=".64" fill="black" style="font-size:.12px;text-anchor:middle;">.6</text>
<text x="1.25" y=".64" fill="black" style="font-size:.12px;text-anchor:middle;">.6</text>
<line x1="-1" y1=".8" x2="1" y2=".8" stroke="black" stroke-width=".005"/>
<text x="-1.25" y=".84" fill="black" style="font-size:.12px;text-anchor:middle;">.8</text>
<text x="1.25" y=".84" fill="black" style="font-size:.12px;text-anchor:middle;">.8</text>
<line x1="-1" y1="1" x2="1" y2="1" stroke="black" stroke-width=".005"/>
<text x="-1.25" y="1.04" fill="black" style="font-size:.12px;text-anchor:middle;">1</text>
<text x="1.25" y="1.04" fill="black" style="font-size:.12px;text-anchor:middle;">1</text>
<line x1="-1" y1="-1" x2="-1" y2="1" stroke="black" stroke-width=".005"/>
<text x="-1" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">-1</text>
<text x="-1" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">-1</text>
<line x1="-.8" y1="-1" x2="-.8" y2="1" stroke="black" stroke-width=".005"/>
<text x="-.8" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">-.8</text>
<text x="-.8" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">-.8</text>
<line x1="-.6" y1="-1" x2="-.6" y2="1" stroke="black" stroke-width=".005"/>
<text x="-.6" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">-.6</text>
<text x="-.6" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">-.6</text>
<line x1="-.4" y1="-1" x2="-.4" y2="1" stroke="black" stroke-width=".005"/>
<text x="-.4" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">-.4</text>
<text x="-.4" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">-.4</text>
<line x1="-.2" y1="-1" x2="-.2" y2="1" stroke="black" stroke-width=".005"/>
<text x="-.2" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">-.2</text>
<text x="-.2" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">-.2</text>
<line x1="0" y1="-1" x2="0" y2="1" stroke="black" stroke-width=".005"/>
<text x="0" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">0</text>
<text x="0" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">0</text>
<line x1=".2" y1="-1" x2=".2" y2="1" stroke="black" stroke-width=".005"/>
<text x=".2" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">.2</text>
<text x=".2" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">.2</text>
<line x1=".4" y1="-1" x2=".4" y2="1" stroke="black" stroke-width=".005"/>
<text x=".4" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">.4</text>
<text x=".4" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">.4</text>
<line x1=".6" y1="-1" x2=".6" y2="1" stroke="black" stroke-width=".005"/>
<text x=".6" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">.6</text>
<text x=".6" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">.6</text>
<line x1=".8" y1="-1" x2=".8" y2="1" stroke="black" stroke-width=".005"/>
<text x=".8" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">.8</text>
<text x=".8" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">.8</text>
<line x1="1" y1="-1" x2="1" y2="1" stroke="black" stroke-width=".005"/>
<text x="1" y="-1.21" fill="black" style="font-size:.12px;text-anchor:middle;">1</text>
<text x="1" y="1.29" fill="black" style="font-size:.12px;text-anchor:middle;">1</text>
</g>
</defs>
<use xlink:href="#idGrid" />
<text x="0" y="0" fill="black" style="font-size:.36px;text-anchor:middle;">Original</text>
</svg>
</div>
<div style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;
float:left;clear:both;">
<svg preserveAspectRatio="xMinYMid slice" width="117px" height="400px"
xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 3 3">
<use xlink:href="#idGrid" />
<text x="-1.05" y="0" fill="black" style="font-size:.36px;text-anchor:middle;">xMin</text>
</svg>
</div>
<div style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;float:left;">
<svg preserveAspectRatio="xMidYMid slice" width="117px" height="400px"
xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 3 3">
<use xlink:href="#idGrid" />
<text x="0" y="0" fill="black" style="font-size:.36px;text-anchor:middle;">xMid</text>
</svg>
</div>
<div style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;float:left;">
<svg preserveAspectRatio="xMaxYMid slice" width="117px" height="400px"
xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 3 3">
<use xlink:href="#idGrid" />
<text x="1.05" y="0" fill="black" style="font-size:.36px;text-anchor:middle;">xMax</text>
</svg>
</div>
<div style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;
float:left;clear:both;">
<svg preserveAspectRatio="xMidYMin slice" width="400px" height="117px"
xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 3 3">
<use xlink:href="#idGrid" />
<text x="0" y="-1.05" fill="black" style="font-size:.36px;text-anchor:middle;">YMin</text>
</svg>
</div>
<div style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;
float:left;clear:both;">
<svg preserveAspectRatio="xMidYMid slice" width="400px" height="117px"
xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 3 3">
<use xlink:href="#idGrid" />
<text x="0" y="0" fill="black" style="font-size:.36px;text-anchor:middle;">YMid</text>
</svg>
</div>
<div style="padding:10px;background-color:AntiqueWhite;border: 2px solid brown;
float:left;clear:both;">
<svg preserveAspectRatio="xMidYMax slice" width="400px" height="117px"
xmlns="http://www.w3.org/2000/svg" viewBox="-1.5 -1.5 3 3">
<use xlink:href="#idGrid" />
<text x="0" y="1.05" fill="black" style="font-size:.36px;text-anchor:middle;">YMax</text>
</svg>
</div>
</body>
</html>Output
© 2007–2025 XoaX.net LLC. All rights reserved.