[解決済み] 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%なので、コンテナが許す範囲で伸縮するはずです。
関連
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] HTMLにPDFを埋め込むおすすめの方法とは?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] CSSでdivを縦にスクロールできるようにする