Menu
I'm totally baffled by SVG images. I want to crop the image to its core content. I want to crop it by specifying its viewbox and/or viewport and/or anything else EXCEPT I do NOT want to change any of the points in the polyline elements. The image as-is renders something like this. (NOTE the border is only for illustration purposes. The border is not actually part of the SVG.)
and I want to crop it so it looks something like this. (NOTE the border again is for illustration purposes only)
Given this SVG XML how do I crop it?
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<polyline points="39,340 42,338 47,333 54,322 68,308 83,292 91,277 100,259 106" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="71,299 82,303 95,304 109,302 120,301" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="212,275 228,254 233,233 240,208 239,246 188,278 174,306 158,334 149,351 144,358 140,362 139,362 139,340 179,313 186" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="169,345 174,347 227,333 231,330 330,371 328,374 414,209 410,192 404,183 401,177 398,177 395,179 379,340 385,384 397,414" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
869
When the svg is inline, you can compute its viewBox by using getBBox() for the root svg.
Below is an example for your polylines:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Compute viewBox</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<h3>Compute viewBox</h3>
<div id=svgDiv style='background-color:lightgreen'>
<svg id=mySVG>
<polyline points="39,340 42,338 47,333 54,322 68,308 83,292 91,277 100,259" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="71,299 82,303 95,304 109,302 120,301" style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="212,275 228,254 233,233 240,208 239,246 188,278 174,306 158,334 149,351 144,358 140,362 139,362 139,340 179,313 " style="fill:none;stroke:black;stroke-width:3"/>
<polyline points="169,345 174,347 227,333 231,330 330,371 328,374 414,209 410,192 404,183 401,177 398,177 395,179 379,340 385,384 397,414" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
</div>
<button onClick=fit()>fit</button>
viewVox:<input type=text size=20 id=vbValue />
</center>
</body>
<script>
//---button--
function fit()
{
var bb=mySVG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var vb=[bbx,bby,bbw,bbh]
mySVG.setAttribute("viewBox", vb.join(" ") )
vbValue.value=vb.join(" ")
svgDiv.style.width=bbw+"px"
svgDiv.style.height=bbh+"px"
}
</script>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
