IE(InternetExplorar)によるSVG表示バグを解消するアプリ作ってみた

最終更新日: - POST CATEGORY = バグ

Webサイトの表示確認をする際に、Chrome、Firefox、Safariなど他のブラウザでは正常に表示されているのにIE11だけ正常に表示されない。そんな場面に出くわしたことはありませんか?

IEではSVGファイルに width属性とheight属性が必要

原因は、SVGファイルにwidth属性とheight属性が指定されていないことです。

Adobe Illastratorから出力されたSVGなどは、width属性とheight属性が指定されていない為、IEがうまく解釈することができません。このような場合は下記のようにSVGのviewBox内にwidthとheightを指定してあげましょう。

(例)
変更前:<svg viewBox=”0 0 120 80″>

変更後:<svg viewBox=”0 0 120 80″ width=”120″ height=”80″>

width属性とheight属性がないSVGは、IE(Internet Explorer)でbackground-imageによる背景画像で指定されたときに、 background-sizeによる大きさの指定とbackground-positionによる位置の指定がうまくいかなくなります。 一手間かかりますね。

そこでSVGファイルにwidthとheightを追加するアプリを作ってみました

SVGファイルにwidth属性とheight属性を追加するアプリをご用意してみました。

「使用用途が限られ過ぎだろ」とか「そんなの手で書けばよいじゃん」というご意見がきこえてきそうですが、そんなのはしりません。作りたかったんです。

コーディング慣れしている方であれば、手で入力してしまった方が早いと思いますが、普段illustratorは使うけど、コーディングまではしないよといったデザイナーさんなど、ソースコードアレルギーのある方のお役に立てたら、これ幸いです。

SVGファイルをIE11の背景画像でバグらせなくするアプリ

使用方法

上記リンクをクリックすると下記のような画面が表示されます。

画面中央の「ファイル選択」をクリックし、属性を追加したいSVGファイルを選択するか、ファイル選択欄に直接SVGファイルをドラッグ&ドロップします。すると下記のような画面に切り替わりますので「ファイル名.svg:成功!画像を保存する」をクリックし属性を追加したSVGファイルをダウンロードしてください。

※このアプリはAdobe Illastratorから出力された、width属性とheight属性が指定されていないSVGファイルを想定して作成しました。異なる出力方法で生成されたSVGファイルには対応しない場合がございますのでご注意願います。(正しいxml文法で作られたSVGであれば基本的には動くと思います)

SVGファイルにwidth属性とheight属性を追加するアプリ

アプリ作った人: コダイラヒロキ

この記事が気に入ったら
いいね ! しよう

Twitter で

この記事を読んだ人はこの記事も読んでいます

Contact お問い合わせ

Webもペーパーアイテムもイラストも、人が人になにかを伝えようとするためのツールでしかありません。
だからデータだけにとらわれず、人間としての感性も大切にしながらデザインしています。

Web, ペーパーアイテム制作に関する
お問い合わせ・制作依頼・お見積もりはこちらから