svg画像おもしろすぎる
公開 2025/02/07 10:55
最終更新
-
初めてsvg形式の画像使ってみた。
svgの形式がなにかっていうと画像の形式なんだけどなんとwebに適した画像らしく、解像度を損なうことなく拡大縮小できてしかもコードでできてる画像だから検索エンジンが画像の中身まで読めるらしい。めちゃくちゃおもしろそう。
ワクワクが止まらないので早速使ってみる
(パソコンでの操作推奨)
まずは無料アイコンサイトからsvg形式でアイコンダウンロードする
↓よく使わせていただいてるアイコンサイト
https://icooon-mono.com
よし。
そのまま開くとブラウザーで開いてしまうから右クリックでエディターから開きます。すると、コードがびっしり！
とりあえずsvg画像っぽい部分をコピーして貼り付けまーーーーす！
↓こういうところ
<svg
〜/svg>
そりゃっ！どーーーーん！
サイズ変更はコードの中に埋め込まれてるから消すとフォントサイズに統一された。(気がする)
svgアイコンの何が面白いかって、つながってる線の塊ごとにコードが記述されてるみたいで、独立した線の部分が多い画像はコードの記述が多くなってるみたい。
色変えしてみるとわかるんだけど一個変えると指部分だけ色変わったりしちゃうから直す時は全部直さないといけない。
こんな感じ↓
まぁ一回やってしまえばいいだけなんだけどね
コードの記述が多くなって画面重くなるかな？と思ったけどそうでもない。これいいな〜画像の余白削ったり微調整する手間も少なくて済みそう
インターネットおもしろい
svgの形式がなにかっていうと画像の形式なんだけどなんとwebに適した画像らしく、解像度を損なうことなく拡大縮小できてしかもコードでできてる画像だから検索エンジンが画像の中身まで読めるらしい。めちゃくちゃおもしろそう。
ワクワクが止まらないので早速使ってみる
(パソコンでの操作推奨)
まずは無料アイコンサイトからsvg形式でアイコンダウンロードする
↓よく使わせていただいてるアイコンサイト
https://icooon-mono.com
よし。
そのまま開くとブラウザーで開いてしまうから右クリックでエディターから開きます。すると、コードがびっしり！
とりあえずsvg画像っぽい部分をコピーして貼り付けまーーーーす！
↓こういうところ
<svg
〜/svg>
そりゃっ！どーーーーん！
サイズ変更はコードの中に埋め込まれてるから消すとフォントサイズに統一された。(気がする)
svgアイコンの何が面白いかって、つながってる線の塊ごとにコードが記述されてるみたいで、独立した線の部分が多い画像はコードの記述が多くなってるみたい。
色変えしてみるとわかるんだけど一個変えると指部分だけ色変わったりしちゃうから直す時は全部直さないといけない。
こんな感じ↓
まぁ一回やってしまえばいいだけなんだけどね
コードの記述が多くなって画面重くなるかな？と思ったけどそうでもない。これいいな〜画像の余白削ったり微調整する手間も少なくて済みそう
インターネットおもしろい
☔️{いらっしゃいませ〜〜⭐️]
備忘録だったり思ってることだったりいろいろかきます。
備忘録だったり思ってることだったりいろいろかきます。
最近の記事
タグ