lostandfound/svg-wrapping.md

Last active May 23, 2017 05:37

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/lostandfound/af3018cd6d138a6f5ee3eb962f7a87d8.js"></script>
Save lostandfound/af3018cd6d138a6f5ee3eb962f7a87d8 to your computer and use it in GitHub Desktop.

Download ZIP

SVGラッピング（EPUBで画像をページ内に最大表示するやつ）

Raw

svg-wrapping.md

imgじゃなくてimageタグだから注意な。

テンプレ

<svg xmlns="http://www.w3.org/2000/svg" 
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%"
  height="100%"
  viewBox="0 0 {{幅（ピクセル）}} {{高さ（ピクセル）}}">
<image width="{{幅（ピクセル）}}" height="{{高さ（ピクセル）}}" xlink:href="{{画像のファイルパス}}"/>
</svg>

例

<svg xmlns="http://www.w3.org/2000/svg" 
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%"
  height="100%"
  viewBox="0 0 1200 1600">
<image width="1200" height="1600" xlink:href="image.png"/>
</svg>

Author

lostandfound commented May 23, 2017

line-heightを1にするとページの余白を減らせるかも

<svg xmlns="http://www.w3.org/2000/svg" 
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  style="line-height:1"
  width="100%"
  height="100%"
  viewBox="0 0 1200 1600">
<image width="1200" height="1600" xlink:href="image.png"/>
</svg>