HTML5でSVGを使用する方法

青灯夜游
青灯夜游オリジナル
2018-11-30 14:18:499067ブラウズ

HTML5 では、 タグを使用して SVG をインライン化し、HTML の HTML5でSVGを使用する方法 タグ、

HTML5でSVGを使用する方法

SVG は、変化する Web ページのサイズに合わせて歪みなく再描画できるベクター グラフィック形式であり、レスポンシブでの使用に非常に適しています。ウェブデザイン。この記事では、HTML5 で SVG を使用する方法を詳しく紹介します。お役に立てれば幸いです。 [おすすめの関連ビデオ チュートリアル: HTML5 チュートリアル]

HTML5 タグを使用して SVG をインライン化する

##SVG パーツHTML 5 ドラフト仕様の タグは HTML 5 言語の一部であり、インラインにすることができます。すべての主要なブラウザ ブランド (IE9 を除く) は、非常に優れたサポートを提供するようになりました。

注:

1. タグを使用して SVG をインライン化するには、 内で xmlns= を宣言することを忘れないでください。タグ要素。http://www.w3.org/2000/svg」。

2. これは静的 SVG インポートにのみ使用できます。

以下は、単純な HTML5 SVG の例です。

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>

レンダリング:

HTML5でSVGを使用する方法

HTML5でSVGを使用する方法 タグを使用して SVG 画像をインポートします。 注: HTML5でSVGを使用する方法 タグは、静的な SVG 画像をインポートする場合にのみ使用できます。

<img  src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />
レンダリング:

## タグを使用して SVG 画像をインポートします

HTML5でSVGを使用する方法

<object type="image/svg+xml" data="image.svg"></object>

技術的には、 タグは SVG ファイルを含む多くの要素で使用でき、画像として認識されない要素がある場合、それらの要素は画像検索で使用できません。解決策は、HTML5でSVGを使用する方法 タグをフォールバックとして使用することです。

<object type="image/svg+xml" data="image.svg">
    <img  src="image.svg" / alt="HTML5でSVGを使用する方法" >
</object>
タグを使用して SVG 画像をインポートします

#
<embed type="image/svg+xml" src="image.svg" />

非推奨 SVG 画像は タグを使用してインポートされます。このタグは HTML 仕様の一部ではありませんが、主に Flash プラグインの実装に使用されるすべてのブラウザで広くサポートされています。

##
<iframe src="image.svg"></iframe>

#CSS 背景画像を使用して SVG 画像をインポートします#CSS 背景属性を使用して、SVG 画像を背景画像としてインポートできます

これは HTML5でSVGを使用する方法 タグを使用するのと同じであり、同じ利点と欠点があります。

#id {
  background-image: url(image.svg)  no-repeat;
}

レンダリング:

要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がHTML5でSVGを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:SVGとは次の記事:SVGとは