見出し画像

【勝手にサイト分析】ヒヨッコ🐣コーダーが、svgに挑戦してみる！！

コーダー㉿クボエミの記録👁️‍🗨️👾🦾



暑いですねぇ〜。
溶けますねぇ🍨🫠

昔こんな暑かったっけ？
最近職場に出勤しても、髙井さんに『暑いですねぇ〜🥲』で始まるのがルーティンになってきました！笑
（ちゃんといつも答えてくれる高井さんの優しさ、、、🥲🤍）

暑い時は無理せずに、一緒に、SVGでも作りませんか？
（無理やり🧠w）

ページによく出てくる『→』や『・』などをsvgで作成しているページをよくみかけます。
参考サイトhttps://nasu.design/

imgでおくよりも自由がきくので実際に作ってみようと思います。☺️

💡svgの特徴

SVGファイルはテキストデータのため、HTMLに直接記述するためにsvgタグを使用することができます。
簡単に特徴をご紹介。

アイコンや図形やテキストにも使える。✨

SVGコード内で直接編集でき、CSSやJavaScriptを使ってアニメーションを追加することもできる。✨

どれだけ拡大しても綺麗。✨

png等の画像も拡張子を.svgに変更することで拡大した時に画像が荒くならない。✨

画像でおくよりも、画面幅とか変更したい時に融通がきくところがsvgの良いところだなと！

💡svgつくってみた

例）<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>

（このコードは、幅100、高さ100のSVGエリア内に、中心が(50,50)で半径が40の赤い円）

結構簡単にできる💨

参考サイトをみると、svgは再利用していろんな箇所で使いまわせることがわかりました。

実際に作ったsvgをパターン化して使い回してみようと思います‼️‼️‼️

1 シンボルの定義のためのsvg styleをかく

使い回すには<symbol>内でコンテンツを定義し、<use>を使って使い回す！

<svg style="display: none;"  xmlns="<http://www.w3.org/2000/svg>" xmlns:xlink="<http://www.w3.org/1999/xlink>">
</svg>

xmlns="http://www.w3.org/2000/svg" とxmlns:xlink="http://www.w3.org/1999/xlinkを発見！

これいりますか？？？？？

xmlns="http://www.w3.org/2000/svg"

  • 目的: SVG ドキュメント内のすべての要素と属性が、SVG 名前空間に属することを示します。

  • 重要性: この名前空間を宣言することで、ブラウザや XML パーサーが、この文書が SVG 仕様に従っていることを理解し、適切に処理できます。

xmlns:xlink="http://www.w3.org/1999/xlink"

  • 目的: XLink 名前空間を宣言し、xlink プレフィックスを使って XML リソースへのリンクを指定します。

  • 重要性: <use> 要素など、リンク機能を持つ要素で xlink:href 属性を使うために必要です。

なるほど💡

これは覚えるとゆうよりもこれをかくことでPCがよりsvgを認識してバグがなくなるのかなと思いました。

もっと調べてみるとまさかの必須でないことがわかりました！！

古いブラウザでなければいらないみたいです。。。令和の時代なのでもうかかなくてもいいのかなとおもいますが、参考サイトでも一回はかいてるけど毎回はかいていない。

実際、書かなくてもmacでは表示されたので、もしものお守り感覚かなと思います。

2 svgの中に<symbol>を定義

<svg style="display: none;"  xmlns="<http://www.w3.org/2000/svg>" xmlns:xlink="<http://www.w3.org/1999/xlink>">

ここにシンボルを追加↓
<symbol id="myCircle" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</symbol>

</svg>

今回●なので＜circle＞が入りましたが、『→』の場合は

<path d="＃”>が入ります。

idで使い回したい名前、 viewBoxで座標を定義します。

ここでの viewBox="0 0 100 100" の意味は:

  • min-x: 0

  • min-y: 0

  • width: 100

  • height: 100

3　＜use＞でつかいまわそう

<svg width="100" height="100">
<use href="#myCircle" />
</svg>

width="100" height="100こんなに幅の指定いるのかな？と思いました。

<svg > <use href="#myCircle" /> </svg>

こっちの方がシンプルなのに。。。とも思ったのですが、svgでは幅の指定が推奨されていました。

<svg viewBox="0 0 100 100" > <use href="#myCircle" /> </svg>

viewBoxで指定するのもいいみたいです。

参考サイトではこのようになっていました。

<svg role="img" viewBox="0 0 16 14"><use xlink:href="#i-arrow-r"></use></svg>

role="img"がついかされた！！！

role="img"追加されることで、pcが『うむ！このsvgコードはimgなのね！』と判断しやすくなりよいアクセシビリティになるみたいです！

使い回しのまとめ🫡

<svg style="display: none;"  xmlns="<http://www.w3.org/2000/svg>" xmlns:xlink="<http://www.w3.org/1999/xlink>">
<symbol id="myCircle" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</symbol>
</svg>


<svg width="100" height="100">
<use href="#myCircle" />
</svg>


もしくわこっち！
<svg  role="img" viewBox="0 0 100 100" >
<use href="#myCircle" />
</svg>

ここでふと、疑問が湧きました、、、

これって毎回シンボルかいてたら大変だし、＜use＞で使い回してる意味がなくないかな。。

svgの数にもよるけど、htmlが＜symbol＞でいっぱいになってしまわないかな。。。

＜symbol＞で埋め尽くされたhtmlは嫌だなと。。。。。

＜symbol＞まとまったファイルを作っちゃえばいい！🥴

参考サイトを見ても、＜symbol＞がかかれているのは一回だけ（デフォのナス）でした。

<link rel="icon" href="<https://nasu.design/wp-content/themes/nasu2023_src/assets/images/common/icons/favicon.svg>" type="image/svg+xml">

<use> タグで#i-arrow-rとか#i-arrow-bとかあって使い回ししているのにのに他の＜symbol＞はどこにいってしまったんだ！！！

と、思い調べてみました。

外部のsvgファイルがあることに気づく😯

htmlが＜symbol＞でいっぱいになってしまう問題を解決するために、外部にファイルを作り、linkで呼び出して<use>で使いまわせることがわかりました。

⭐️パターン１

例えば、favicon.svgというファイルを作成

<!-- favicon.svg -->
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41 0.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>

外部からSVGファイルをインラインで参照

<!-- SVGファイルを参照 -->
<svg style="display: none;">
<use href="icons.svg#icon-heart"></use>
</svg>

<!-- シンボルを使う -->
<svg width="24" height="24">
    <use href="icons.svg#icon-heart"></use>
</svg>

⭐️パターン２　（参考サイトが行なっている方法はこっち）

HTMLファイルでSVGファイルを参照

head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Icon Example</title>

ここ！↓
<link rel="icon" href="favicon.svg" type="image/svg+xml">

</head>

favicon.svgで定義している#i-arrow-rとか#i-arrow-bを<use>タグで呼び出す


終わりに、🍵

お疲れ様でございました🍵どぅぞ。♡

ページ数が多くて何度も他ページに飛ぶ『→』やimgは使いまわせるように他ファイルに保存して呼び出すようにしておくのはとても便利だと思いました。
特に画像数が多くなると読み込むのにも時間がかかってしまうので重くならないサイトになるのもいいと思います。

簡単な🔴とかであればそれだけをイラレとかで作るのは面倒だし、画素数がギャミギャミになるのも防げるのでどんどん使っていきたいと思います。モリモリ💪

参考になったら嬉しいです🌺

いいなと思ったら応援しよう！