【随時更新】SVGとは？ よく使用するSVGのDataまとめ・一覧

SVG_DataList

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、よく使用するSVGのDataを一覧で、再利用しやすいようにまとめていきます。

SVGとは？

SVGとは、Scalable Vector Graphics の略称であり、JPEGやPNGなどの画像フォーマットと並んで、Web上で使用される画像フォーマットの一種です。

ただ、ベクター画像フォーマットは、JPEGやPNGとは違い、

Webページ上でスケーリングされるため、画質が損なわれることがなく、高品質な画像を表示することができます。

ちなみに、ベクター画像フォーマットとは、直線や曲線などの数学的な形状情報で画像を表現する方法であり、拡大・縮小しても画質が劣化しない利点があります。

SVGの場合は、ベクター画像情報を、XMLをベースに点の座標とベクトルの数値データで画像を描画する「ベクターデータ」を記述していきます。

なので、ベクター画像フォーマットの特徴である拡大縮小しても画質を落とさずに表示できるほか、

テキストエディタで編集することができ、CSSを使用して装飾することもできます。

【メリット】

  1. 大きさを変更できるベクター画像であるため、画像を拡大・縮小しても画質が劣化しない。
  2. 高解像度の画像を扱う際にも適しています。
  3. 複雑な図形やグラフィックスを表現できるため、デザインの自由度が高い。
  4. ファイルサイズが小さいため、Webページの読み込み速度が向上する。
  5. テキストやCSSで編集ができ、再利用性が高い。
  6. CSSでカスタマイズすることができる。

【デメリット】

  1. 写真やリアルな画像を表現するのには適していない。
  2. 画像処理が複雑であり、ブラウザによっては処理に時間がかかる場合がある。
  3. 古いブラウザではサポートされていないため、互換性に問題がある。

よく使用するSVGのDataまとめ・一覧

User・Icon

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
    <g transform="translate(1 1)">
        <path data-name="パス 444" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" transform="translate(-4 -3)" style="fill:none;stroke:#172b4d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"/>
        <circle data-name="楕円形 340" cx="4" cy="4" r="4" transform="translate(4)" style="fill:none;stroke:#172b4d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"/>
    </g>
</svg>

User・Icon (Circle付き)

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
  <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
  <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
</svg>

Login・Icon

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 19H12V21H20C21.1 21 22 20.1 22 19V5C22 3.9 21.1 3 20 3H12V5H20V19Z" fill="#666666"/>
<path d="M11 16L15 12L11 8L11 11L3 11L3 13L11 13L11 16Z" fill="#666666"/>
</svg>

Logout・Icon

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 19L12 19L12 21L5 21C3.9 21 3 20.1 3 19L3 5C3 3.9 3.9 3 5 3L12 3L12 5L5 5L5 19ZM21 12L17 16L17 13L9 13L9 11L17 11L17 8L21 12Z" fill="#666666"/>
</svg>

プラスボタン・Icon

<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.99602 9.5678V5.36145H12.0992V9.5678H16.3055V11.671H12.0992V15.8773H9.99602V11.671H5.78967V9.5678H9.99602ZM11.0476 21.1353C5.2397 21.1353 0.531738 16.4273 0.531738 10.6194C0.531738 4.81147 5.2397 0.103516 11.0476 0.103516C16.8555 0.103516 21.5635 4.81147 21.5635 10.6194C21.5635 16.4273 16.8555 21.1353 11.0476 21.1353ZM11.0476 19.0321C13.2788 19.0321 15.4186 18.1458 16.9963 16.5681C18.574 14.9904 19.4603 12.8506 19.4603 10.6194C19.4603 8.3882 18.574 6.2484 16.9963 4.67071C15.4186 3.09303 13.2788 2.20669 11.0476 2.20669C8.81643 2.20669 6.67662 3.09303 5.09894 4.67071C3.52125 6.2484 2.63491 8.3882 2.63491 10.6194C2.63491 12.8506 3.52125 14.9904 5.09894 16.5681C6.67662 18.1458 8.81643 19.0321 11.0476 19.0321Z" fill="#504E4E"/>
</svg>

マイナスボタン・Icon

<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6189 21.4439C4.81098 21.4439 0.103027 16.7359 0.103027 10.928C0.103027 5.12007 4.81098 0.412109 10.6189 0.412109C16.4268 0.412109 21.1348 5.12007 21.1348 10.928C21.1348 16.7359 16.4268 21.4439 10.6189 21.4439ZM10.6189 19.3407C12.8501 19.3407 14.9899 18.4543 16.5676 16.8767C18.1453 15.299 19.0316 13.1592 19.0316 10.928C19.0316 8.6968 18.1453 6.55699 16.5676 4.97931C14.9899 3.40162 12.8501 2.51528 10.6189 2.51528C8.38771 2.51528 6.24791 3.40162 4.67022 4.97931C3.09254 6.55699 2.2062 8.6968 2.2062 10.928C2.2062 13.1592 3.09254 15.299 4.67022 16.8767C6.24791 18.4543 8.38771 19.3407 10.6189 19.3407ZM5.36096 9.8764H15.8768V11.9796H5.36096V9.8764Z" fill="#504E4E"/>
</svg>

お気に入り(Favorite)・Icon

<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 19L8.55 17.7C6.86667 16.1834 5.475 14.875 4.375 13.775C3.275 12.675 2.4 11.6875 1.75 10.8125C1.1 9.93752 0.645833 9.13336 0.3875 8.40002C0.129167 7.66669 0 6.91669 0 6.15002C0 4.58336 0.525 3.27502 1.575 2.22502C2.625 1.17502 3.93333 0.650024 5.5 0.650024C6.36667 0.650024 7.19167 0.833358 7.975 1.20002C8.75833 1.56669 9.43333 2.08336 10 2.75002C10.5667 2.08336 11.2417 1.56669 12.025 1.20002C12.8083 0.833358 13.6333 0.650024 14.5 0.650024C16.0667 0.650024 17.375 1.17502 18.425 2.22502C19.475 3.27502 20 4.58336 20 6.15002C20 6.91669 19.8708 7.66669 19.6125 8.40002C19.3542 9.13336 18.9 9.93752 18.25 10.8125C17.6 11.6875 16.725 12.675 15.625 13.775C14.525 14.875 13.1333 16.1834 11.45 17.7L10 19Z" fill="#FF454D"/>
</svg>

FavoriteのEmpty(空状態)のSVGは、こちらです。

<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 18.9999L8.55 17.6999C6.86667 16.1832 5.475 14.8749 4.375 13.7749C3.275 12.6749 2.4 11.6874 1.75 10.8124C1.1 9.9374 0.645833 9.13324 0.3875 8.3999C0.129167 7.66657 0 6.91657 0 6.1499C0 4.58324 0.525 3.2749 1.575 2.2249C2.625 1.1749 3.93333 0.649902 5.5 0.649902C6.36667 0.649902 7.19167 0.833236 7.975 1.1999C8.75833 1.56657 9.43333 2.08324 10 2.7499C10.5667 2.08324 11.2417 1.56657 12.025 1.1999C12.8083 0.833236 13.6333 0.649902 14.5 0.649902C16.0667 0.649902 17.375 1.1749 18.425 2.2249C19.475 3.2749 20 4.58324 20 6.1499C20 6.91657 19.8708 7.66657 19.6125 8.3999C19.3542 9.13324 18.9 9.9374 18.25 10.8124C17.6 11.6874 16.725 12.6749 15.625 13.7749C14.525 14.8749 13.1333 16.1832 11.45 17.6999L10 18.9999ZM10 16.2999C11.6 14.8666 12.9167 13.6374 13.95 12.6124C14.9833 11.5874 15.8 10.6957 16.4 9.9374C17 9.17907 17.4167 8.50407 17.65 7.9124C17.8833 7.32074 18 6.73324 18 6.1499C18 5.1499 17.6667 4.31657 17 3.6499C16.3333 2.98324 15.5 2.6499 14.5 2.6499C13.7167 2.6499 12.9917 2.87074 12.325 3.3124C11.6583 3.75407 11.2 4.31657 10.95 4.9999H9.05C8.8 4.31657 8.34167 3.75407 7.675 3.3124C7.00833 2.87074 6.28333 2.6499 5.5 2.6499C4.5 2.6499 3.66667 2.98324 3 3.6499C2.33333 4.31657 2 5.1499 2 6.1499C2 6.73324 2.11667 7.32074 2.35 7.9124C2.58333 8.50407 3 9.17907 3.6 9.9374C4.2 10.6957 5.01667 11.5874 6.05 12.6124C7.08333 13.6374 8.4 14.8666 10 16.2999Z" fill="#F4F6F7"/>
</svg>

ロック(鍵マーク)・Icon

<svg width="32" height="39" viewBox="0 0 32 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.7314 13.9085V10.0653C25.7314 4.68479 21.4832 0.457275 16.0763 0.457275C10.6695 0.457275 6.42123 4.68479 6.42123 10.0653V13.9085C3.1385 13.9085 0.628174 16.4066 0.628174 19.6733V33.1245C0.628174 36.3912 3.1385 38.8893 6.42123 38.8893H25.7314C29.0142 38.8893 31.5245 36.3912 31.5245 33.1245V19.6733C31.5245 16.4066 29.0142 13.9085 25.7314 13.9085ZM10.2833 10.0653C10.2833 6.79855 12.7936 4.30047 16.0763 4.30047C19.3591 4.30047 21.8694 6.79855 21.8694 10.0653V13.9085H10.2833V10.0653ZM18.2004 26.3989L18.0073 26.591V29.2813C18.0073 30.4342 17.2349 31.2029 16.0763 31.2029C14.9177 31.2029 14.1453 30.4342 14.1453 29.2813V26.591C12.9867 25.4381 12.7936 23.7086 13.9522 22.5557C15.1108 21.4027 16.8487 21.2105 18.0073 22.3635C19.166 23.3243 19.3591 25.2459 18.2004 26.3989Z" fill="#FBBC05"/>
</svg>

カメラ・Icon

<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.93484 12.5546C9.94027 12.5546 10.795 12.2026 11.4991 11.4985C12.2032 10.7945 12.5549 9.93998 12.5544 8.93508C12.5544 7.92965 12.2024 7.07489 11.4983 6.37082C10.7942 5.66675 9.93974 5.31498 8.93484 5.31552C7.9294 5.31552 7.07465 5.66755 6.37058 6.37162C5.6665 7.0757 5.31474 7.93018 5.31527 8.93508C5.31527 9.94052 5.66731 10.7953 6.37138 11.4993C7.07545 12.2034 7.92994 12.5552 8.93484 12.5546ZM2.50005 15.3699C2.05766 15.3699 1.67882 15.2122 1.36351 14.8969C1.04821 14.5816 0.890823 14.203 0.891359 13.7612V4.10899C0.891359 3.6666 1.04901 3.28775 1.36432 2.97245C1.67962 2.65715 2.0582 2.49976 2.50005 2.5003H5.03375L6.52179 0.891602H11.3479L12.8359 2.5003H15.3696C15.812 2.5003 16.1909 2.65795 16.5062 2.97325C16.8215 3.28856 16.9789 3.66714 16.9783 4.10899V13.7612C16.9783 14.2036 16.8207 14.5824 16.5054 14.8977C16.1901 15.213 15.8115 15.3704 15.3696 15.3699H2.50005Z" fill="#666666"/>
</svg>

バツマーク・Icon

<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.0469 1.02344L0.953125 19.0315M0.953125 1.02344L20.0469 19.0315" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

右矢印・Icon

<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 7L1 1V13L9 7Z" stroke="#666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

男性・Icon

<svg width="8" height="20" viewBox="0 0 8 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.01953 0C4.28217 0 4.54224 0.0517315 4.78489 0.152241C5.02755 0.25275 5.24802 0.400069 5.43374 0.585786C5.61946 0.771503 5.76678 0.991982 5.86729 1.23463C5.9678 1.47728 6.01953 1.73736 6.01953 2C6.01953 2.53043 5.80881 3.03914 5.43374 3.41421C5.05867 3.78929 4.54996 4 4.01953 4C3.4891 4 2.98039 3.78929 2.60532 3.41421C2.23024 3.03914 2.01953 2.53043 2.01953 2C2.01953 1.73736 2.07126 1.47728 2.17177 1.23463C2.27228 0.991982 2.4196 0.771503 2.60532 0.585786C2.79103 0.400069 3.01151 0.25275 3.25416 0.152241C3.49681 0.0517315 3.75689 0 4.01953 0ZM2.51953 5H5.51953C6.04996 5 6.55867 5.21071 6.93374 5.58578C7.30881 5.96086 7.51953 6.46957 7.51953 7V12.5H6.01953V20H2.01953V12.5H0.519531V7C0.519531 6.46957 0.730245 5.96086 1.10532 5.58578C1.48039 5.21071 1.9891 5 2.51953 5Z" fill="#0e7dff"/>
</svg>

女性・Icon

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0586 2C12.3212 2 12.5813 2.05173 12.824 2.15224C13.0666 2.25275 13.2871 2.40007 13.4728 2.58579C13.6585 2.7715 13.8058 2.99198 13.9064 3.23463C14.0069 3.47728 14.0586 3.73736 14.0586 4C14.0586 4.53043 13.8479 5.03914 13.4728 5.41421C13.0977 5.78929 12.589 6 12.0586 6C11.5282 6 11.0195 5.78929 10.6444 5.41421C10.2693 5.03914 10.0586 4.53043 10.0586 4C10.0586 3.73736 10.1103 3.47728 10.2108 3.23463C10.3113 2.99198 10.4587 2.7715 10.6444 2.58579C10.8301 2.40007 11.0506 2.25275 11.2932 2.15224C11.5359 2.05173 11.7959 2 12.0586 2ZM10.5586 22V16H7.55859L10.1486 8.41C10.3986 7.59 11.1586 7 12.0586 7C12.9586 7 13.7186 7.59 13.9686 8.41L16.5586 16H13.5586V22H10.5586Z" fill="#f78901"/>
</svg>

関連記事

SVGファイルの画像イメージを確認したり、入手する方法
PNGとJPEGとSVGの違いとメリット・デメリット、Web上での使い分け方

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

NextJS_ESLint
Next.js・TypeScript 環境のESLintとPr…

次の記事

CSS の positionプロパティとは？ position…
CSS_position