1. ホーム
  2. html

[解決済み] htmlでSVGをリサイズする?

2022-04-20 23:05:10

質問

そこで、HTMLにSVGファイルを持っているのですが、このフォーマットについて聞いたことのあることのひとつに、拡大してもピクセル化されないということがあります。

jpegなどでは、50×50のアイコンとして保存し、image_srcタグで高さと幅を手動で設定することで、実際には(かなりピクセル化された)100×100(または10×10)のサムネイルとして表示できますね。

しかし、SVGファイルはobject/embedタグで使用されるようで、その高さや幅を変更すると、画像に割り当てられる容量が増えるだけです。

SVG画像をファイルシステムに保存されているサイズより小さく表示したり大きく表示したりする方法はありますか?

解決方法は?

を開いてください。 .svg ファイルをテキストエディタで開き(単なるXMLです)、上部に次のようなものがないか探してください。

<svg ... width="50px" height="50px"...

幅と高さの属性を消去します。デフォルトは100%なので、コンテナが許す範囲で伸縮するはずです。