[CSS]SVGのサイズを変更する方法
アイコンでSVGを使用した時など、大きさを変更したい時などがありますよね。
今回はSVGのサイズを変更する方法を紹介します。
SVGでサイズを変更するには？
SVGのサイズを変更するには、大きく分けて二つの方法があります。
一つは、インラインで記述し大きさを直接書き込むこと。
もう一つは、CSSで要素を指定し大きさを変更する方法。
この二つの方法を見ていきます。
[インライン]SVGのサイズを変更する
インラインで記述したSVGのサイズ変更は極めて簡単です。
<svg width="19px" height="15px" viewBox="0 0 19 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Ionicons" font-size="20" font-weight="400"> <text id="ion-social-twitter---Ionicons" fill="#000000"> <tspan x="0" y="15"></tspan> </text> </g> </svg>
svgタグの中のwidthとheightのサイズを指定するだけでOKです。
CSSでSVGのサイズを変更する
次にCSSでSVGのサイズを変更する方法を見ていきます。
SVGはインラインで記述した時に、CSS側でサイズや色の変更をすることができます。
ここでは、Twitterのアイコンサイズを縦横100pxで指定します。SVGのサイズはheightとwidthで指定することができます。
まとめ
いかがでしたでしょうか？
今回、CSSでSVGのサイズを変更する方法を紹介しました。
要素として、サイズの変更が非常に簡単ですね。アイコンやフォローボタンなど様々なシーンでSVGは使えるのでぜひ参考にしてみてください。
