本文へスキップ

ドキュメント

SVG

ページマークアップにインラインSVG画像を挿入し、CSSでスタイル設定します。

SVG（Scalable Vector Graphics）は、拡大しても鮮明さを保つロゴの表示やアニメーションに非常に便利です。SVGコンポーネントは、画像とそのベクター部分をスタイル設定およびアニメーション化するためのより多くの制御を提供します。ID、クラス、幅、高さなどのすべての属性を含むインラインSVGとしてマークアップに画像を挿入するため、CSSを使用して簡単にターゲットを指定できます。

使用方法

このコンポーネントを適用するには、<img>要素にuk-svg属性を追加します。

<img src="" width="" height="" uk-svg>

uk-svg属性を使用すると、SVGファイルからシンボルを挿入することもできます。断片化されたURLと同様に、シンボルのIDを画像パスに追加するだけです。

  • <!-- Targets the SVG image -->
<img src="../assets/uikit/src/images/icons/cloud-download.svg" width="40" height="40" uk-svg>

<!-- Targets a symbol inside the SVG image -->
<img src="../assets/uikit/tests/images/icons.svg#cloud-upload" width="40" height="40" uk-svg>

注記 SVGは、ストロークと塗りつぶしの色に現在の色を適用します。この動作を回避するには、SVG自体またはSVG内の要素に.uk-preserveクラスを追加します。

注記 <img>要素のloading="lazy"属性が考慮され、SVG画像はビューポートに入るとインラインSVGとして挿入されます。

ストロークアニメーション

アニメーションコンポーネントとuk-svg="stroke-animation: true"を使用する方法と、パララックスコンポーネントを使用する2つの方法があります。

コンポーネントオプション

これらのオプションは、コンポーネント属性に適用できます。複数のオプションをセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
src 文字列 SVGソースURL。場所ハッシュが存在する場合は、指定されたIDを持つSVGの<symbol>のみが表示されます。
stroke-animation ブール値 false SVG内のstroke属性を持つすべての要素をアニメーション化します。

JavaScript

JavaScriptコンポーネントの詳細をご覧ください。

初期化

UIkit.svg(element, options);

プロパティ

svg

追加されたSVGノードを解決するJavaScript Promise。

UIkit.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })