JavaScript で SVG ファイルをインポートするにはどうすればよいですか?-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-09-12 23:01:01

転載

1421 人が閲覧しました

スケーラブルベクターグラフィックス (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 使用シナリオ (スケーラブルベクターグラフィックス) を検討して使用します。