Stanza-Top
立秋

残暑お見舞い-svg

残暑お見舞い申し上げます

レイアウト崩れを防ぐには画像化するのが一番確実なのですが、文字情報がなくなります。

Adobe Illustrator_CCからSVG保存したものをインライン埋込み

残暑お見舞い申し上げます お盆があけてもしらくは、最高気温37度以の日々が続き、夜中も30度えと、このまま熱帯常夏の国なるかと思いきや、日が暮れといつの間にかこほろぎがくようになりました。よよく見れば庭の雑草心なしか秋
写真:岡山西川アイプラザ

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
インラインSVG Chrome30表示

GoogleChorome_30での表示

インラインSVG  Firefox24表示

Firefox_24での表示

インラインSVG  IE10表示

InternetExplore_10での表示

インラインSVG  Opera_16表示

Opera_16での表示

SVG非対応ブラウザーに考慮したら、やはり代替画像も用意してobject タグで表示させる方がよさそうです。

残暑お見舞い

SVGの対応状況など、渡辺竜さんのRruverサイトのページを参考にさせていただきました。

PDF埋込み

ご覧の環境では、object要素がサポートされていないようです。PDFファイルをダウンロードしてください

21 Aug 2013

<< 1 >> 1ページ中1ページ目