JavaScript で SVG ファイルをインポートするにはどうすればよいですか?

スケーラブル ベクター グラフィックス (SVG とも呼ばれる) は、2D グラフィックスまたは画像ファイルです。のために 視覚効果を作成するために、SVG ファイルでは数式と一連の形状、線、 などの機能があります。 SVG は、色のレンダリング方法を指定する単なる XML コードです。 ファイル内の他の図形に対して各フォームがどのように表示されるか、および各図形がどのように表示されるか 見せる。

SVG およびその他のベクター グラフィックスは以下に依存します。 jpeg や png ファイルなどの視覚データを伝えるために使用されるピクセル。

Web デザインで SVG ファイルを使用する 4 つの利点は次のとおりです -

明瞭さ

SVG ファイルのサイズは無限に変更できます。 SVG ファイルにはラスター イメージに比べて大きな利点があります。 鮮明さを失うことなく、何度でも拡大やサイズ変更を行うことができます。ラスター画像 正しくスケーリングしないと、鮮明さが失われ、粗く見えることもあります。

柔軟性

どんなデバイスでも見栄えの良い、レスポンシブな SVG ファイルを簡単に作成できます。 ビューアは Web ページをズームインします。 SVG ファイルは、編集段階を通じて繰り返しサイズ変更できます。 透明感を失わずに。 SVG ファイルはロゴやシンプルなインフォグラフィックに最適です それは彼らの適応力のおかげです。 SVG ファイルはアニメーションにも使用でき、特に次の用途に適しています。 さまざまな配色やグラデーションを使用したフォントの開発に適しています。

より小さいファイル

SVG ファイルのサイズは、デザイン内の視覚的な複雑さまたはパスの数に基づきます。 おそらく、まったく同じ画像の PNG や JPG よりもはるかに少ないでしょう。 SVG ファイルは、 Vecta.io によると、PNG より 60% ～ 80% 小さく、負荷も軽減されます。 を向上させ、ユーザー エクスペリエンス (UX) を向上させます。ウェブサイト SEO のもう 1 つの利点は、ページの読み込みが高速になることです。

アクセスと包括性の向上

SVG ファイルには、アクセシビリティと多様性の点で多くの利点があります。デザイナー グラフィック視覚要素を定義する構造データを SVG ファイルに含める機能 それ自体が、特定の支援技術のユーザーがそこに含まれるコンテンツを理解するのに役立つ可能性があります 画像。オプションとして、ラスター ファイルはスクリーン リーダーに情報を提供するためにメタデータ (代替テキストなど) のみを使用します。 グラフィック コンテンツに関連するその他の支援技術。

この記事では、多くの SVG 使用シナリオ (スケーラブル ベクター グラフィックス) を検討して使用します。

最初の方法

最も早い方法は、HTML 要素を使用することです。

＃＃＃文法＃＃＃ リーリー

SVG を

要素に埋め込むには、次のものが必要です -

src属性
SVG に固有のアスペクト比がない場合は、高さ属性を使用します。
SVG にネイティブのアスペクト比がない場合は、width 属性を使用します。

• ＃＃＃アドバンテージ＃＃＃

導入はシンプルかつ迅速です。

• ネストされた HTML 要素

  と
は、SVG 画像をまとめてハイパーリンクに変換します。

• SVG ファイルは、読み込みを高速化するためにキャッシュされます。

• 欠点

SVG ファイルは簡単に操作できません。

• インライン CSS を使用して SVG のスタイルを設定するだけです。

• CSS 疑似クラスを SVG のスタイルに使用することはできません。

• 例 1

HTMLソースコード

リーリー

2 番目の方法 次のメソッドでは、SVG を

として使用する方法を理解します。 ＃＃＃文法＃＃＃ リーリー

「object」要素を使用してSVGを埋め込むには、以下が必要です -

タイプ

プロパティ

データ
• プロパティ class属性(内部/外部CSS使用時)
• ＃＃＃アドバンテージ＃＃＃ SVG は、外部/内部 CSS を使用してスタイル設定できます。
• コーディングは簡単かつ迅速です。

キャッシュでは良好なパフォーマンスが得られるはずです。

欠点
• 外部スタイル シートを使用する場合は、SVG ファイルの
要素を使用する必要があります。
実行と構文に詳しくありません。

例 2

• リーリー

CSS ソースコード

リーリー ＃＃＃出力＃＃＃

上記のコードは次の出力を返します -

3番目の方法

次の方法では、

を使用してSVGを埋め込む方法を理解しましょう。

＃＃＃文法＃＃＃ リーリー

SVG を埋め込むには 要素が必要です。

src 属性。

SVG に固有のアスペクト比がない場合は、高さ属性を使用します。

• ＃＃＃アドバンテージ＃＃＃

実装は迅速かつ簡単です。
• 要素と同じです。

欠点

• JavaScript を使用して SVG を変更することはできません。

• キャッシュは理想的ではありません。

例 3

HTMLソースコード

• ああああ

以上がJavaScript で SVG ファイルをインポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。