レイアウト崩れを防ぐには画像化するのが一番確実なのですが、文字情報がなくなります。
残暑お見舞い申し上げます>
Adobe Illustrator_CCからSVG保存したものをインライン埋込み
写真：岡山西川アイプラザ
Adobe Illustrator_CCからSVG1.1/使用文字埋込みで保存。
imgタグで.svgファイルを読み込むのでなく、記事内に直接SVGのコードを入れています。
エリア内文字やシアーなど、HTML+ CSSではかなり面倒そうなレイアウトで試してみました。ブラウザーによって字間が少し崩れたり、フォント情報は無視されたりですが、テキストが選択できるのはありがたい。
問題は少し前のブラウザーだとSVG表示に対応していないことですね。
- 元のIllustrator ファイル：1.9 MB（画像は150ppiで埋込み）
- PDF：167 KB（同ファイルから画像圧縮JPEG<画質：高>・PDF1.7で保存）
- SVG：491 KB
GoogleChorome_30での表示
Firefox_24での表示
InternetExplore_10での表示
Opera_16での表示
SVG非対応ブラウザーに考慮したら、やはり代替画像も用意してobject タグで表示させる方がよさそうです。
SVGの対応状況など、渡辺竜さんのRruverサイトのページを参考にさせていただきました。
PDF埋込み
21 Aug 2013