NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

イラレで書きだしたSVGのサイズを可変にする

bell賞味期限切れコンテンツ

この記事は公開または最終更新から820日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

さいきん少しずつ利用が増えてきてるSVGですが、イラレで書き出すとはじめに作ったサイズで固定されてしまい、objectタグのサイズをいくらいじっても、画像そのもののサイズは変わりません。(はみ出します)

これをなんとかするには、ちょこっとSVGを加工してあげれば良いみたいです。

はじめに

自分もまだSVGについては調べ始めたばかりですので、この方法が本当に正しいかはわかりませんし、もっとスマートな方法もあるかもしれませんが、今自分に分かる範囲で実現できた方法としてメモしておきます。

 

やりかた

まずは、SVGを作成します。イラレで適等に絵を書いて、SVGで保存しておけばOK。

それを今度はおもむろにテキストエディタで開きます。

SVGは画像ですが、中身はXMLですので、問題なく開けるはずです。

そしてはじめの方にある、<svg>タグのなかにある、

widthとheightの値を 100% に書き直します。または、値を消すという説も。

以上でSVG側の修正は終わりです。

あとは、objectタグの方で画像サイズを指定してあげれば、オブジェクトのサイズいっぱいに表示されるので、結果objectタグだけでSVGのサイズを変更できるようになります。

因みに object タグの中にこのように画像を入れておけば、SVGに対応していないブラウザでも中の画像が代替画像として表示されるので、古いブラウザからアクセスしても安心ですね。 

 

というか、イラレで書き出す段階でサイズを100%に指定できる方法があればもっと楽なんですけどねぇ。イラレもまだよくわからないことが多いです…。

誰か知っていたらおしえてください

 

 

って下書きのまま忘れ去られていた記事を見なおしていたら気づいたんですが、CCあたりから(かな?)はいつの間にか書き出し項目に「レスポンシブ」というものが増えてました。これチェックしておくと width や height の値は設定されないようですので、上記の作業も不要になりますね。

illustratorcc_savesvg_1

 

えっ、俺の保存画面こんなに項目ないよ??

って方は、左下の「詳細オプション」押してみてください。

illustratorcc_savesvg_2

上のキャプチャみたいな詳細なオプション画面に切り替わるはずです。

TAGS