HTML5 では、 タグを使用して SVG をインライン化し、HTML の タグ、 タグを使用して SVG 画像をインポートできます。背景プロパティはSVG画像をインポートします。 <br> 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 画像をインポートします。 注: タグは、静的な SVG 画像をインポートする場合にのみ使用できます。 ログイン後にコピーレンダリング: ## タグを使用して SVG 画像をインポートしますログイン後にコピー 技術的には、 タグは SVG ファイルを含む多くの要素で使用でき、画像として認識されない要素がある場合、それらの要素は画像検索で使用できません。解決策は、 タグをフォールバックとして使用することです。 ログイン後にコピー タグを使用して SVG 画像をインポートします#ログイン後にコピー非推奨 SVG 画像は タグを使用してインポートされます。このタグは HTML 仕様の一部ではありませんが、主に Flash プラグインの実装に使用されるすべてのブラウザで広くサポートされています。 タグを使用して SVG 画像をインポート</strong></span></p>##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><iframe src="image.svg">ログイン後にコピー iframe は保守が難しく、検索エンジンによってインデックスに登録されず、SEO (検索エンジン最適化) に役立たないため、<object> タグを使用することをお勧めします。 </p><p><strong>#CSS 背景画像を使用して SVG 画像をインポートします<span style="font-size: 16px;"></span></strong>#CSS 背景属性を使用して、SVG 画像を背景画像としてインポートできます<br/></p> これは <img alt="HTML5でSVGを使用する方法" > タグを使用するのと同じであり、同じ利点と欠点があります。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#id { background-image: url(image.svg) no-repeat; }</pre><div class="contentsignin">ログイン後にコピー</div></div></p>レンダリング: <p><strong><span style="font-size: 16px;"></span></strong>要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。 </p></svg></svg></svg>
