WordPressでSVG形式の画像表示

WordPressでSVG(Scalable Vector Graphics)画像の表示に挑戦してみる。
SVGファイルをアップロードしてimgタグで他の画像と同様に記述し表示……表示されない。やっぱりまだ一般的な画像フォーマットではないので何か設定が必要のようです。
WordPressのSVGに関連するプラグインをインストールしてみるが、うまくいかない。もっと調べてみると、どうやらサーバーの設定(MIME Type)も必要のようです。それと、IE9では表示関連に問題があり対策が必要。
今後、プログラムの説明で図が必要なときは、SVG画像を使う予定です。

SVG画像の表示(WordPress日本公式キャラクター「わぷー」)
WordPress日本公式キャラクター「わぷー」

MIME Typeの追加

サーバーに拡張子svgのファイルが画像データだと教える必要があります。使用中のレンタルサーバでは.htaccessでMIME Typeの追加が可能なので 

という記述を追加しました。
これで、Webブラウザなどがsvgファイルを画像データとして扱ってくれます。svgzは圧縮SVG。

WordPressのメディアアップロード対応
svgをアップロードしようとすると、不明なファイルフォーマットのためか「セキュリティー上問題があります」というエラーが出て、アップロードに失敗します。サーバーの時と同様にWordPressにもsvgが画像データだと設定。設定にはプラグイン(Scalable Vector Graphics (SVG))を使用しました。プラグインをインストール、有効化することでアップロード可能になり、メディアライブラリのサムネイルも表示されました。

画像の挿入
imgタグを使って画像を挿入できます。srcにsvgファイルを指定するだけです。メディアライブラリからも挿入できます。

Internet Explorerでの問題
・IE9以降svgファイルに対応
・svgにviewBoxの設定がないと表示サイズ変更ができない
古いIEへの対応はあきらめています。
imgタグにwidth=”100″などの属性を追加して表示サイズを変えた場合、IEで正常に表示されないことがあります。原因はsvgタグのviewBox属性の有無(たぶん)。
svgのviewBox属性がないと他のブラウザと表示結果が異なります(IEは切り取り、他は拡縮)。svgを作成する際にviewBox属性の設定が必要になります。
他のブラウザ:FireFox Chorme Opera Safari (1年以内に更新)

svg作成ツール
Inkscapeというツールを使う予定です。簡単な図を作成するぐらいなら十分すぎるツールだと思います。
IEでのviewBox問題の対応ですが、Inkscapeで保存してもviewBox属性が追加されないので、直接テキストを書き換えて追加するか、Save AsのOptimized SVGの出力ダイアログで”Enable viewboxing”を有効にするとviewBox属性が追加されます。

追記(2013/3/22)
InkscapeでOptimized SVGで”Enable viewboxing”とした場合、画像サイズがピクセル(px)単位の場合のみ出力されるようです。mmなどの単位だとviewBoxが設定されません。
矢印などの特殊な図形は、ブラウザによって表示されなかったり、異なる表示になるようです。その際は、パスに変換して出力する必要があります。

さらに追記(2013/3/23)
InkscapeのOptimized SVG出力するとwidth height viewBoxの属性が設定されないことがあるようです。width heightが設定されない場合、スマートフォンで表示すると上下に大きな空白ができてしまいます(Andoroidのブラウザ、iPod TouchのSafari)。
なので原因がはっきりするまで
SVGファイルには、手書きでwidth height viewBoxを書き込むようにします。

 

リンクなど
使用したSVG画像:WordPress日本公式キャラクター「わぷー」
WordPressプラグイン:Scalable Vector Graphics (SVG)
svg作成ツール:Inkscape

「WordPressでSVG形式の画像表示」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

認証:数字を入力してください(必須) * Time limit is exhausted. Please reload CAPTCHA.