[CSS]SVGのサイズを変更する方法

0

アイコンでSVGを使用した時など、大きさを変更したい時などがありますよね。

今回はSVGのサイズを変更する方法を紹介します。

SVGでサイズを変更するには?

SVGのサイズを変更するには、大きく分けて二つの方法があります。

一つは、インラインで記述し大きさを直接書き込むこと。

もう一つは、CSSで要素を指定し大きさを変更する方法。

この二つの方法を見ていきます。

 

[インライン]SVGのサイズを変更する

インラインで記述したSVGのサイズ変更は極めて簡単です。

svgタグの中のwidthとheightのサイズを指定するだけでOKです。

 

CSSでSVGのサイズを変更する

次にCSSでSVGのサイズを変更する方法を見ていきます。

SVGはインラインで記述した時に、CSS側でサイズや色の変更をすることができます。

参考:[Webデザイン]SVGとは?

 

ここでは、Twitterのアイコンサイズを縦横100pxで指定します。SVGのサイズはheightとwidthで指定することができます。

See the Pen gzGvzX by code-school (@code-school) on CodePen.

HTML側のインラインで埋め込むSVGタグにクラス(もしくはID)を指定するのも忘れないようにしましょう。

ここではTwitterというクラスでCSSで記述しました。

 

まとめ

いかがでしたでしょうか?

今回、CSSでSVGのサイズを変更する方法を紹介しました。

要素として、サイズの変更が非常に簡単ですね。アイコンやフォローボタンなど様々なシーンでSVGは使えるのでぜひ参考にしてみてください。








 

関連記事



About Author

Comments are closed.