↩ テクノロジー開発非公開: HTML で SVG を使用して美しいグラフィックをデザインする方法

HTML で SVG を使用して美しいグラフィックをデザインする方法

フロントエンド開発者であれば、適切な画像を取得して全体のデザインとブレンドすることがいかに難しいかをすでに理解しているでしょう。 Web ページ上で、拡大縮小が不十分なロゴや、あまりプロフェッショナルに見えない画像に遭遇したことがあるかもしれません。

また、エンドユーザーはさまざまな画面サイズのガジェットを使用してアプリを閲覧できるため、応答性の高いアプリケーションが必要な世界にも私たちは生きています。 Web 開発者は、ユーザーがスマートフォン、タブレット、またはパソコンのいずれを使用しているかに関係なく、Web サイトに追加する画像がさまざまな画面サイズに合わせて最適化されていることを保証する必要があります。

スケーラブルベクターグラフィックス (SVG) ファイル形式は、これらの課題の一部を解決します。この記事では、SVG ファイルの定義、HTML での使用方法、他のファイル形式と比較したメリットとベストプラクティスについて説明します。

コンテンツ 表示

SVG画像とは何ですか?

Scalable Vector Graphics (SVG) は、ベクターデータを利用する画像形式です。 SVG ファイルは、アイコンやロゴなど、Web サイト上の写真以外の画像に適しています。ピクセルを使用して定義される他の画像とは異なり、SVG はベクトルデータに基づいています。

現在、さまざまなファイル形式が存在します。ただし、大きく 2 つの分類があります。ラスターグラフィックスとベクターグラフィックス。

JPEG および PNG ファイルはラスターグラフィックスの例です。これらのグラフィックスは、画像情報をビットマップ (色付きの正方形のグリッド) に保存します。ビットマップ内の正方形を組み合わせると、コンピューター画面のピクセルと同様に機能する画像が形成されます。

SVG と PDF はベクターグラフィックスの例です。これらのファイルは XML マークアップ言語で書かれています。このようなファイル内の XML コードは、画像を構成するすべてのテキスト、色、および形状を指定します。

SVG 画像には、特に Web 開発における特定の使用例があります。これらは次のような場合に使用できます。

ロゴ: 優れた Web サイトには、人々の共感を呼ぶロゴが必要です。手紙、会社の商品、Web サイトのヘッダーなどにロゴを追加できます。 SVG 形式で保存されたロゴは、品質を損なうことなくさまざまなユースケースに適合できます。
アイコン: Web サイトのアイコンは、リンクやボタンのように機能する画像またはシンボルです。完璧な例は、Facebook や Instagram などのソーシャルメディアページにリンクするソーシャルアイコンです。このようなファイルには境界線が明確に定義されており、シンプルでもあります。このようなアイコンはさまざまな画面サイズに対応する必要があるため、SVG 形式で保存する必要があります。
アニメーション: 最近の Web サイトには、外観が動的に変化する画像やビデオが含まれています。アニメーション SVG ファイルを作成して、ユーザーを惹きつけ、視覚的なセンスを加えることができます。
データの視覚化とインフォグラフィックス: 情報 Web サイトをお持ちの場合は、インフォグラフィックスとグラフを SVG 形式で保存できます。好例としては、一定数の人を対象としたキャンペーンが挙げられます。サインアップするたびに自動的に更新される進行状況バーを備えた SVG 形式のグラフを作成できます。
イラスト: Web ページに追加したい装飾的な図面がある場合、それらを SVG 形式で保存すると、拡大または縮小に関係なく品質が維持されます。

HTML で SVG を使用する方法

座標系とビューボックスを定義するコンテナとして svg 要素を使用します。 svg タグには画像要素が含まれており、この画像のフレームも定義します。

viewBox プロパティは、画像の内部サイズを定義します。一方、高さと幅のプロパティを使用して、ブラウザ内で画像が占めるスペースの量を決定します。

フォローしたい場合は、次の手順を実行してください。

使用する画像はPixabayから無料でダウンロードしてください。 (必ず .svg 形式を選択してください)。
新しいプロジェクトを作成し、アセットフォルダーを追加し、ダウンロードしたイメージをここに保存します。画像の名前を decorative.svg に変更します。
index.html および styles.css ファイルを作成します。 2 つのファイルをリンクします。

 <head>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

次に、HTML で SVG を使用するさまざまな方法を示します。

方法 1: 画像としてsvgを使用する

SVG 画像を <img> タグで囲むことができます。自動開閉タグなので開け閉めする必要がありません。

svgを画像として簡単に表現すると以下のようになります。

 <img src= "(your image)"  />

次のように HTML 全体を変更できます。

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h2>Use SVG as an image demonstration</h2>

    <img src= "assets/decorative.svg" alt= "svg as an image" />

</body>

</html>

単純なスタイルをstyles.cssファイルに追加して、svg画像の width と height プロパティを定義します。

 img {

    height: 200px;

    width: 300px;

  }

ブラウザ上でコードを実行すると、最終的な出力は以下のようになります。

方法 2: SVGを背景画像として使用する

SVG は、HTML ページの特定のセクションまたは本文全体の背景として使用できます。 CSS を使用して、background-image プロパティを定義します。

HTML ドキュメントの本文セクションをすべてクリアします。

これを styles.css シートに追加できます。

 body{

    background-image: url(/assets/decorative.svg);

    height: 10px;

    width: 5px;

  }

ブラウザ上でコードをレンダリングすると、次のようになります。

ブラウザ上でコードをレンダリングする

方法 3: SVG を `<embed>` として使用する

<embed> HTML タグを使用して SVG 画像を囲むことができます。

次のように HTML ファイルで定義できます。

 <embed src= “(your image)” />

このコードは、 index.html ファイル で使用できます 。

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h2>How to embed SVG in HTML</h2>

    <embed src="/assets/decorative.svg" />

</body>

</html>

レンダリングされた SVG 画像は次のように表示されます。

検索エンジンの最適化には良くないため、埋め込みとして SVG を使用することをお勧めします。

方法 4: SVGをインライン要素として使用する

この方法では、 <svg>...</svg> タグを使用して SVG 要素を含めることができます。

以下をせよ;

コードエディターで画像を開き、コード全体をコピーします (1 万行以上になります)。
div を作成し、次のようにコードを含めます。

 <div>

 // Put your SVG code here

</div>

レンダリングされたアイテムは次のように表示されます。

SVG をインライン要素として使用すると、HTML ドキュメントに大量のコードが追加され、読み込み速度に影響を与えるため、お勧めできません。

方法 5: SVG を `<iframe>` として使用する

iframe で SVG を使用するための一般的なレイアウトは次のとおりです。

   <iframe src="(you image") </iframe>

HTML ファイルは次のように変更できます。

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1>Use SVG with iframe</h1>

    <iframe src="./assets/decorative.svg" width="400px" height="200px"></iframe>

</body>

</html>

レンダリングされた Web ページは次のように表示されます。

方法 6: SVG を `<object>` として使用する

HTML の <object> タグを使用すると、ビデオ、オーディオ、SVG などのさまざまな形式の画像など、さまざまなコンテンツタイプを囲むことができます。

SVG をオブジェクトとして埋め込む一般的な形式は次のとおりです。

 <object data="(you SVG image)" type="image/svg+xml"></object>

このコードを HTML ファイルに追加します。

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h2>Use SVG as an Object</h2>

    <object data="./assets/decorative.svg" width="300" height="300"> </object>

</body>

</html>

レンダリングされた Web ページは次のように表示されます。

HTML で SVG を使用する利点

スケーラビリティ: SVG ファイルは解像度に依存しないため、品質を損なうことなく任意のサイズに拡大縮小できます。 SVG ファイルのサイズを拡張すると、ブラウザはその背後にある計算を自動的に再計算して、品質の歪みがないことを確認します。
編集可能: 色などを変更して、SVG ファイルを簡単に再デザインできます。たとえば、Web サイトのさまざまな部分に異なる色合いで表示されるようにロゴを編集できます。
SEO フレンドリー: SVG ファイルは XML で記述されているため、タイトルや説明にキーワードや検索フレーズを簡単に含めることができます。
ファイルサイズが小さい: SVG 画像は PNG や JPEG よりも小さいです。 SVG ファイルは、品質を維持しながらコンパクトなサイズで保存できます。

HTML の SVG: ベストプラクティス

SVG ファイルサイズの最適化: 不要なメタデータを削除することで、SVG ファイルのサイズを最小限に抑えることができます。 GZIP 圧縮技術を使用して、これらのファイルのサイズを削減することもできます。
ブラウザ間の互換性: SVG ファイルをさまざまな画面サイズでテストして、最適化されていることを確認します。
アクセシビリティと SEO のために SVG ファイルにラベルを付ける: 画像をオンラインで見つけられるようにするには、SVG ファイル内で <desc> タグと <title> タグを使用します。
必要に応じて外部スタイルシートを使用する: Web アプリに複数の SVG ファイルがある場合は、コードの保守と更新が容易になる外部スタイルシートを使用できます。また、異なる SVG ファイル間で同じスタイルを使用できるため、コードの作成にかかる時間を短縮できます。

結論

HTML で SVG を使用するためのさまざまなアプローチが自由に使えるようになりました。どのアプローチを選択するかは、達成したいことと好みによって異なります。たとえば、SVG を背景画像として使用したい場合は、それを CSS ファイルに含める必要があります。

ただし、Web アプリケーションにアイコンやロゴを追加する場合は、画像として SVG を選択するか、オブジェクトとして SVG を選択できます。

素晴らしい Web デザインプロジェクト用のトップ CSS アニメーションライブラリをいくつか探索することもできます。

「 HTML で SVG を使用して美しいグラフィックをデザインする方法」についてわかりやすく解説！絶対に観るべきベスト2動画

【Webデザイン入門】SVGって何？SVG画像の作成・読み込み・ダウンロード方法まで一気に解説【HTML・CSS コーディング】

https://www.youtube-nocookie.com/watch?v=244bWyxbd6o&pp=ygVZIEhUTUwg44GnIFNWRyDjgpLkvb_nlKjjgZfjgabnvo7jgZfjgYTjgrDjg6njg5XjgqPjg4Pjgq_jgpLjg4fjgrbjgqTjg7PjgZnjgovmlrnms5UmaGw9SkE%3D

【Webデザイン入門】SVGって何？SVG画像の作成・読み込み・ダウンロード方法まで一気に解説【HTML・CSS コーディング】 (https://www.youtube-nocookie.com/watch?v=244bWyxbd6o&pp=ygVZIEhUTUwg44GnIFNWRyDjgpLkvb_nlKjjgZfjgabnvo7jgZfjgYTjgrDjg6njg5XjgqPjg4Pjgq_jgpLjg4fjgrbjgqTjg7PjgZnjgovmlrnms5UmaGw9SkE%3D)

SVG線画で美しい文字をリッチアニメーション(stroke animation) | HTML, CSS【プログラミング入門】

https://www.youtube-nocookie.com/watch?v=g01usbLIUnA&pp=ygVZIEhUTUwg44GnIFNWRyDjgpLkvb_nlKjjgZfjgabnvo7jgZfjgYTjgrDjg6njg5XjgqPjg4Pjgq_jgpLjg4fjgrbjgqTjg7PjgZnjgovmlrnms5UmaGw9SkE%3D

SVG線画で美しい文字をリッチアニメーション(stroke animation) | HTML, CSS【プログラミング入門】 (https://www.youtube-nocookie.com/watch?v=g01usbLIUnA&pp=ygVZIEhUTUwg44GnIFNWRyDjgpLkvb_nlKjjgZfjgabnvo7jgZfjgYTjgrDjg6njg5XjgqPjg4Pjgq_jgpLjg4fjgrbjgqTjg7PjgZnjgovmlrnms5UmaGw9SkE%3D)

開発

フロントエンド開発者であれば、適切な画像を取得して全体のデザインとブレンドすることがいかに難しいかをすでに理解しているでしょう。 Web ページ上で、拡大縮小が不十分なロゴや、あまりプロフェッショナルに見えない画像に遭遇したことがあるかもしれません。

また、エンドユーザーはさまざまな画面サイズのガジェットを使用してアプリを閲覧できるため、応答性の高いアプリケーションが必要な世界にも私たちは生きています。 Web 開発者は、ユーザーがスマートフォン、タブレット、またはパソコンのいずれを使用しているかに関係なく、Web サイトに追加する画像がさまざまな画面サイズに合わせて最適化されていることを保証する必要があります。

スケーラブルベクターグラフィックス (SVG) ファイル形式は、これらの課題の一部を解決します。この記事では、SVG ファイルの定義、HTML での使用方法、他のファイル形式と比較したメリットとベストプラクティスについて説明します。

コンテンツ 表示

SVG画像とは何ですか?

Scalable Vector Graphics (SVG) は、ベクターデータを利用する画像形式です。 SVG ファイルは、アイコンやロゴなど、Web サイト上の写真以外の画像に適しています。ピクセルを使用して定義される他の画像とは異なり、SVG はベクトルデータに基づいています。

現在、さまざまなファイル形式が存在します。ただし、大きく 2 つの分類があります。ラスターグラフィックスとベクターグラフィックス。

JPEG および PNG ファイルはラスターグラフィックスの例です。これらのグラフィックスは、画像情報をビットマップ (色付きの正方形のグリッド) に保存します。ビットマップ内の正方形を組み合わせると、コンピューター画面のピクセルと同様に機能する画像が形成されます。

SVG と PDF はベクターグラフィックスの例です。これらのファイルは XML マークアップ言語で書かれています。このようなファイル内の XML コードは、画像を構成するすべてのテキスト、色、および形状を指定します。

SVG 画像には、特に Web 開発における特定の使用例があります。これらは次のような場合に使用できます。

ロゴ: 優れた Web サイトには、人々の共感を呼ぶロゴが必要です。手紙、会社の商品、Web サイトのヘッダーなどにロゴを追加できます。 SVG 形式で保存されたロゴは、品質を損なうことなくさまざまなユースケースに適合できます。
アイコン: Web サイトのアイコンは、リンクやボタンのように機能する画像またはシンボルです。完璧な例は、Facebook や Instagram などのソーシャルメディアページにリンクするソーシャルアイコンです。このようなファイルには境界線が明確に定義されており、シンプルでもあります。このようなアイコンはさまざまな画面サイズに対応する必要があるため、SVG 形式で保存する必要があります。
アニメーション: 最近の Web サイトには、外観が動的に変化する画像やビデオが含まれています。アニメーション SVG ファイルを作成して、ユーザーを惹きつけ、視覚的なセンスを加えることができます。
データの視覚化とインフォグラフィックス: 情報 Web サイトをお持ちの場合は、インフォグラフィックスとグラフを SVG 形式で保存できます。好例としては、一定数の人を対象としたキャンペーンが挙げられます。サインアップするたびに自動的に更新される進行状況バーを備えた SVG 形式のグラフを作成できます。
イラスト: Web ページに追加したい装飾的な図面がある場合、それらを SVG 形式で保存すると、拡大または縮小に関係なく品質が維持されます。

HTML で SVG を使用する方法

座標系とビューボックスを定義するコンテナとして svg 要素を使用します。 svg タグには画像要素が含まれており、この画像のフレームも定義します。

viewBox プロパティは、画像の内部サイズを定義します。一方、高さと幅のプロパティを使用して、ブラウザ内で画像が占めるスペースの量を決定します。

フォローしたい場合は、次の手順を実行してください。

使用する画像はPixabayから無料でダウンロードしてください。 (必ず .svg 形式を選択してください)。
新しいプロジェクトを作成し、アセットフォルダーを追加し、ダウンロードしたイメージをここに保存します。画像の名前を decorative.svg に変更します。
index.html および styles.css ファイルを作成します。 2 つのファイルをリンクします。

 <head>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

次に、HTML で SVG を使用するさまざまな方法を示します。

方法 1: 画像としてsvgを使用する

SVG 画像を <img> タグで囲むことができます。自動開閉タグなので開け閉めする必要がありません。

svgを画像として簡単に表現すると以下のようになります。

 <img src= "(your image)"  />

次のように HTML 全体を変更できます。

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h2>Use SVG as an image demonstration</h2>

    <img src= "assets/decorative.svg" alt= "svg as an image" />

</body>

</html>

単純なスタイルをstyles.cssファイルに追加して、svg画像の width と height プロパティを定義します。

 img {

    height: 200px;

    width: 300px;

  }

ブラウザ上でコードを実行すると、最終的な出力は以下のようになります。

方法 2: SVGを背景画像として使用する

SVG は、HTML ページの特定のセクションまたは本文全体の背景として使用できます。 CSS を使用して、background-image プロパティを定義します。

HTML ドキュメントの本文セクションをすべてクリアします。

これを styles.css シートに追加できます。

 body{

    background-image: url(/assets/decorative.svg);

    height: 10px;

    width: 5px;

  }

ブラウザ上でコードをレンダリングすると、次のようになります。

ブラウザ上でコードをレンダリングする

方法 3: SVG を `<embed>` として使用する

<embed> HTML タグを使用して SVG 画像を囲むことができます。

次のように HTML ファイルで定義できます。

 <embed src= “(your image)” />

このコードは、 index.html ファイル で使用できます 。

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h2>How to embed SVG in HTML</h2>

    <embed src="/assets/decorative.svg" />

</body>

</html>

レンダリングされた SVG 画像は次のように表示されます。

検索エンジンの最適化には良くないため、埋め込みとして SVG を使用することをお勧めします。

方法 4: SVGをインライン要素として使用する

この方法では、 <svg>...</svg> タグを使用して SVG 要素を含めることができます。

以下をせよ;

コードエディターで画像を開き、コード全体をコピーします (1 万行以上になります)。
div を作成し、次のようにコードを含めます。

 <div>

 // Put your SVG code here

</div>

レンダリングされたアイテムは次のように表示されます。

SVG をインライン要素として使用すると、HTML ドキュメントに大量のコードが追加され、読み込み速度に影響を与えるため、お勧めできません。

方法 5: SVG を `<iframe>` として使用する

iframe で SVG を使用するための一般的なレイアウトは次のとおりです。

   <iframe src="(you image") </iframe>

HTML ファイルは次のように変更できます。

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1>Use SVG with iframe</h1>

    <iframe src="./assets/decorative.svg" width="400px" height="200px"></iframe>

</body>

</html>

レンダリングされた Web ページは次のように表示されます。

方法 6: SVG を `<object>` として使用する

HTML の <object> タグを使用すると、ビデオ、オーディオ、SVG などのさまざまな形式の画像など、さまざまなコンテンツタイプを囲むことができます。

SVG をオブジェクトとして埋め込む一般的な形式は次のとおりです。

 <object data="(you SVG image)" type="image/svg+xml"></object>

このコードを HTML ファイルに追加します。

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h2>Use SVG as an Object</h2>

    <object data="./assets/decorative.svg" width="300" height="300"> </object>

</body>

</html>

レンダリングされた Web ページは次のように表示されます。

HTML で SVG を使用する利点

スケーラビリティ: SVG ファイルは解像度に依存しないため、品質を損なうことなく任意のサイズに拡大縮小できます。 SVG ファイルのサイズを拡張すると、ブラウザはその背後にある計算を自動的に再計算して、品質の歪みがないことを確認します。
編集可能: 色などを変更して、SVG ファイルを簡単に再デザインできます。たとえば、Web サイトのさまざまな部分に異なる色合いで表示されるようにロゴを編集できます。
SEO フレンドリー: SVG ファイルは XML で記述されているため、タイトルや説明にキーワードや検索フレーズを簡単に含めることができます。
ファイルサイズが小さい: SVG 画像は PNG や JPEG よりも小さいです。 SVG ファイルは、品質を維持しながらコンパクトなサイズで保存できます。

HTML の SVG: ベストプラクティス

SVG ファイルサイズの最適化: 不要なメタデータを削除することで、SVG ファイルのサイズを最小限に抑えることができます。 GZIP 圧縮技術を使用して、これらのファイルのサイズを削減することもできます。
ブラウザ間の互換性: SVG ファイルをさまざまな画面サイズでテストして、最適化されていることを確認します。
アクセシビリティと SEO のために SVG ファイルにラベルを付ける: 画像をオンラインで見つけられるようにするには、SVG ファイル内で <desc> タグと <title> タグを使用します。
必要に応じて外部スタイルシートを使用する: Web アプリに複数の SVG ファイルがある場合は、コードの保守と更新が容易になる外部スタイルシートを使用できます。また、異なる SVG ファイル間で同じスタイルを使用できるため、コードの作成にかかる時間を短縮できます。

結論

HTML で SVG を使用するためのさまざまなアプローチが自由に使えるようになりました。どのアプローチを選択するかは、達成したいことと好みによって異なります。たとえば、SVG を背景画像として使用したい場合は、それを CSS ファイルに含める必要があります。

ただし、Web アプリケーションにアイコンやロゴを追加する場合は、画像として SVG を選択するか、オブジェクトとして SVG を選択できます。

素晴らしい Web デザインプロジェクト用のトップ CSS アニメーションライブラリをいくつか探索することもできます。

「 HTML で SVG を使用して美しいグラフィックをデザインする方法」についてわかりやすく解説！絶対に観るべきベスト2動画

【Webデザイン入門】SVGって何？SVG画像の作成・読み込み・ダウンロード方法まで一気に解説【HTML・CSS コーディング】

https://www.youtube-nocookie.com/watch?v=244bWyxbd6o&pp=ygVZIEhUTUwg44GnIFNWRyDjgpLkvb_nlKjjgZfjgabnvo7jgZfjgYTjgrDjg6njg5XjgqPjg4Pjgq_jgpLjg4fjgrbjgqTjg7PjgZnjgovmlrnms5UmaGw9SkE%3D

【Webデザイン入門】SVGって何？SVG画像の作成・読み込み・ダウンロード方法まで一気に解説【HTML・CSS コーディング】 (https://www.youtube-nocookie.com/watch?v=244bWyxbd6o&pp=ygVZIEhUTUwg44GnIFNWRyDjgpLkvb_nlKjjgZfjgabnvo7jgZfjgYTjgrDjg6njg5XjgqPjg4Pjgq_jgpLjg4fjgrbjgqTjg7PjgZnjgovmlrnms5UmaGw9SkE%3D)

SVG線画で美しい文字をリッチアニメーション(stroke animation) | HTML, CSS【プログラミング入門】

https://www.youtube-nocookie.com/watch?v=g01usbLIUnA&pp=ygVZIEhUTUwg44GnIFNWRyDjgpLkvb_nlKjjgZfjgabnvo7jgZfjgYTjgrDjg6njg5XjgqPjg4Pjgq_jgpLjg4fjgrbjgqTjg7PjgZnjgovmlrnms5UmaGw9SkE%3D

SVG線画で美しい文字をリッチアニメーション(stroke animation) | HTML, CSS【プログラミング入門】 (https://www.youtube-nocookie.com/watch?v=g01usbLIUnA&pp=ygVZIEhUTUwg44GnIFNWRyDjgpLkvb_nlKjjgZfjgabnvo7jgZfjgYTjgrDjg6njg5XjgqPjg4Pjgq_jgpLjg4fjgrbjgqTjg7PjgZnjgovmlrnms5UmaGw9SkE%3D)

開発