さいきん少しずつ利用が増えてきてるSVGですが、イラレで書き出すとはじめに作ったサイズで固定されてしまい、objectタグのサイズをいくらいじっても、画像そのもののサイズは変わりません。(はみ出します)
これをなんとかするには、ちょこっとSVGを加工してあげれば良いみたいです。
はじめに
自分もまだSVGについては調べ始めたばかりですので、この方法が本当に正しいかはわかりませんし、もっとスマートな方法もあるかもしれませんが、今自分に分かる範囲で実現できた方法としてメモしておきます。
やりかた
まずは、SVGを作成します。イラレで適等に絵を書いて、SVGで保存しておけばOK。
それを今度はおもむろにテキストエディタで開きます。
SVGは画像ですが、中身はXMLですので、問題なく開けるはずです。
そしてはじめの方にある、<svg>タグのなかにある、
widthとheightの値を 100% に書き直します。または、値を消すという説も。
1 2 3 |
<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 58.631 45.668" enable-background="new 0 0 58.631 45.668" xml:space="preserve"> |
以上でSVG側の修正は終わりです。
あとは、objectタグの方で画像サイズを指定してあげれば、オブジェクトのサイズいっぱいに表示されるので、結果objectタグだけでSVGのサイズを変更できるようになります。
1 2 3 |
<object data="img/test.svg" type="image/svg+xml" width="100"> <img src="img/test.png" alt="test" width="100"> </object> |
因みに object タグの中にこのように画像を入れておけば、SVGに対応していないブラウザでも中の画像が代替画像として表示されるので、古いブラウザからアクセスしても安心ですね。
というか、イラレで書き出す段階でサイズを100%に指定できる方法があればもっと楽なんですけどねぇ。イラレもまだよくわからないことが多いです…。
誰か知っていたらおしえてください
って下書きのまま忘れ去られていた記事を見なおしていたら気づいたんですが、CCあたりから(かな?)はいつの間にか書き出し項目に「レスポンシブ」というものが増えてました。これチェックしておくと width や height の値は設定されないようですので、上記の作業も不要になりますね。
えっ、俺の保存画面こんなに項目ないよ??
って方は、左下の「詳細オプション」押してみてください。
上のキャプチャみたいな詳細なオプション画面に切り替わるはずです。
コメントする