svg-cropper

SVG Code

SVG内に仕込んだJavaScriptでwidth, height, viewBoxを動的に書き換える。
スクリプトを実行するため、object要素で埋め込む必要がある。

Photo 1

<object data='./svg/photo1.svg?x=340&y=185&w=140&h=140' type='image/svg+xml'></object>

./svg/photo1.svg?x=120&y=387&w=170&h=170

Photo 2

<object data='./svg/photo2.svg?x=170&y=5&w=370&h=370' type='image/svg+xml'></object>

About: https://twitter.com/daizplus/status/1287448695781302272
by daiiz

事後調査

どうやらSVGの仕様にSVG fragment identifiersというものがあるらしい。
https://www.w3.org/TR/2003/REC-SVG11-20030114/linking.html#LinksIntoSVG
これを使うとURL Fragmentで切り取る範囲を指定できる。
埋め込み元のobjectやimg要素にwidth, height属性を指定する必要がある点だけ注意。

#svgView(viewBox(x,y,w,h))

<object data='./svg/photo1.svg#svgView(viewBox(120,387,170,170))' width='170' height='170' type='image/svg+xml'></object>