Skip to content

Instantly share code, notes, and snippets.

@lostandfound
Last active May 23, 2017 05:37
Show Gist options
  • Save lostandfound/af3018cd6d138a6f5ee3eb962f7a87d8 to your computer and use it in GitHub Desktop.
Save lostandfound/af3018cd6d138a6f5ee3eb962f7a87d8 to your computer and use it in GitHub Desktop.
SVGラッピング(EPUBで画像をページ内に最大表示するやつ)

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>
@lostandfound
Copy link
Author

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment