SVG

SVGは、XMLに基づくベクターベースの2Dグラフィック形式であり、インタラクティビティとアニメーションをサポートしています。 Parcelは、SVGを個別のファイルとして、HTMLに埋め込まれたものとして、またはJavaScriptファイルにJSXとしてインポートされたものとしてサポートしています。

依存関係

Parcelは、SVG内の他のファイル（`<script>`、`<image>`、`<use>`など）へのほとんどの参照を検出し、それらも処理します。これらの参照は、正しい出力ファイルにリンクするように書き換えられます。

ファイル名は現在のSVGファイルからの相対パスで解決されますが、絶対パスおよびチルダ指定子を使用することもできます。詳細は、依存関係の解決を参照してください。

スタイルシート

外部スタイルシートは、SVGドキュメント内の`xml-stylesheet`処理命令を介して参照できます。 CSSファイル、またはSASS、Less、Stylusなど、CSSにコンパイルされる他のファイルを referencingできます。

example.svg

<?xml-stylesheet href="style.css" ?>
<svg viewBox="0 0 240 20" xmlns="http://www.w3.org/2000/svg">
  <text>Red text</text>
</svg>

style.css

text {
  fill: red;
}

ParcelによるCSSの処理方法の詳細については、CSSドキュメントを参照してください。

スクリプト

`<script>`要素を使用して、SVGからスクリプトファイルを参照できます。 JavaScriptファイル、またはTypeScript、JSX、CoffeeScriptなど、JavaScriptにコンパイルされる他のファイルを referencingできます。

`type="module"`属性は、ファイルがESモジュールまたはCommonJSファイルであることを示すために使用する必要があります。省略した場合、参照されるファイルは従来のスクリプトとして扱われます。これについて詳しくは、従来のスクリプトを参照してください。 ESモジュールはまだSVGでネイティブにサポートされていないため、Parcelはモジュールとして作成された場合でも、すべてのJavaScriptを従来のスクリプトにコンパイルします。

**注**：SVGは、`<script>`要素の`src`属性ではなく`href`属性を使用します。

example.svg

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" fill="red" />
  <script type="module" href="interactions.js" />
</svg>

interactions.js

let circle = document.querySelector('circle');
circle.addEventListener('click', () => {
  circle.setAttribute('fill', 'blue');
});

`<script>`要素の詳細については、MDNドキュメントを、ParcelによるJavaScriptの処理方法の詳細については、JavaScriptドキュメントを参照してください。

画像

ラスター画像または他のSVGは、`<image>`要素を使用してSVGファイルに埋め込むことができます。 Parcelは、`href`属性と`xlink:href`属性を認識します。

<image href="image.jpg" width="100" height="50" />

Parcelの画像トランスフォーマーは、クエリパラメータを使用して画像のサイズ変更と変換を行うためにも使用できます。

<image href="image.jpg?as=webp" width="100" height="50" />

**注**：`<image>`要素を介して参照されるSVGは、スタイルシート、フォント、その他の画像などの外部リソースを読み込まず、スクリプトとインタラクティビティは無効になります。

Parcelによる画像の処理方法の詳細については、画像ドキュメントを参照してください。

リンク

SVGファイルは、`<a>`要素を使用して他のWebページまたはファイルにリンクできます。 Parcelは、`href`属性と`xlink:href`属性をサポートしています。

<a href="circle.html">
  <circle cx="50" cy="40" r="35" />
</a>

SVGファイルから参照される他のアセットには、コンパイルされたファイル名にデフォルトでコンテンツハッシュが含まれますが、`<a>`要素によって参照されるファイルには含まれません。これは、これらのURLは通常人間が判読可能であり、時間の経過とともに安定した名前を持つ必要があるためです。バンドルの命名は、ネーミングプラグインによってオーバーライドできます。

外部参照

Parcelは、他の多くの要素の`href`属性と`xlink:href`属性を介した外部参照をサポートしています。詳細については、MDNドキュメントを参照してください。

<use href="fox.svg#path" stroke="red" />
<text>
  <textPath href="fox.svg#path">
    Quick brown fox jumps over the lazy dog.
  </textPath>
</text>

`fill`、`stroke`、`clip-path`など、多くのプレゼンテーション属性の`url()`関数で参照される外部リソースもサポートされています。

<circle
  cx="50" cy="40" r="35"
  fill="url(external.svg#gradient)" />

インラインスクリプトとスタイル

テキストコンテンツを含む`<script>`タグと`<style>`タグもスタンドアロンファイルと同様に処理され、生成されたバンドルはSVGファイルに 다시 挿入されます。上記のように`type="module"`属性を使用して、インラインスクリプトから他のモジュールをインポートできるようにします。

example.svg

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
  <style>
    @import './style.scss';
  </style>
  <script type="module">
    import {setup} from './interactions.ts';
    let circle = document.querySelector('circle');
    setup(circle);
  </script>
</svg>

style.scss

$fill: blue;

circle {
  fill: $fill;
}

interactions.ts

export function setup(element: SVGElement) {
  element.addEventListener('click', () => {
    element.setAttribute('fill', 'red');
  });
}

`@import`を介して参照されるCSSファイル、および`import`を介して参照されるJavaScriptは、コンパイルされたSVGファイルにバンドルされます。外部ファイルを参照する方法については、スタイルシートとスクリプトを参照してください。

インライン`style`属性

`style`属性は、任意のSVG要素で使用してCSSスタイルを定義できます。 ParcelはインラインCSSを処理し、結果を`style`属性に 다시 挿入します。これには、参照されるURLに従うこと、およびターゲットブラウザ用に最新のCSSを変換することが含まれます。

<circle
  cx="50" cy="40" r="35"
  style="fill: url(external.svg#gradient)" />

HTML内のSVG

HTML内のSVGは、外部ファイルとして参照するか、HTMLドキュメントに直接埋め込むことができます。

外部SVG

SVGファイルは、HTMLからいくつかの方法で参照できます。最も簡単な方法は、`<img>`要素を使用し、`src`属性を使用してSVGファイルを参照することです。 Parcelは参照に従い、SVGとそのすべての依存関係も処理します。

<img src="logo.svg" alt="logo" />

この方法は、SVGが静的である場合に最適です。 SVGが他のSVG、画像、フォント、スタイルシート、スクリプトなどの外部リソースを参照している場合、またはインタラクティビティが含まれている場合は機能しません。また、HTMLページのCSSを介してSVGのスタイルを変更したり、JavaScriptでSVGのDOMを操作したりすることはできず、SVG内のテキストはユーザーが選択できません。

`<object>`要素を使用して、外部SVGをHTMLに埋め込み、外部参照、スクリプト、インタラクティビティ、およびテキスト選択を有効にすることができます。 `data`属性を使用してSVGファイルを参照します。

<object data="interactive.svg" title="Interactive SVG"></object>

これにより、`<object>`要素の`getSVGDocument()`メソッドを介してSVG DOMにアクセスすることもできます。

let object = document.querySelector('object');
let svg = object.getSVGDocument();
let circle = svg.querySelector('circle');
circle.setAttribute('fill', 'red');

ただし、`<object>`要素を使用して埋め込まれたSVGは、HTMLページのCSSでスタイルを設定できません。

インラインSVG

SVGは、個別のファイルとして参照するのではなく、HTMLに直接インライン化できます。これにより、HTMLページのCSSでSVG要素のスタイルを設定できます。 Parcelは、SVGが個別のファイルにある場合と同じ方法で、埋め込みSVG内の外部参照をサポートします。

<!DOCTYPE html>
<html>
  <body>
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="50" />
    </svg>
    <style>
      circle {
        fill: blue;
      }

      circle:hover {
        fill: green;
      }
    </style>
  </body>
</html>

CSS内のSVG

SVGは、`url()`関数を使用してCSSファイルから参照できます。 `<img>`要素と同様に、背景画像のSVGはスタイルシートなどの外部リソースをサポートせず、スクリプトとインタラクティビティは無効になります。

.logo {
  background: url('logo.svg');
}

データURLを使用して、小さなSVGをCSSファイルに埋め込むこともできます。これを行うには、`data-url:`スキームを使用します。ParcelはSVGをビルドし、結果をコンパイルされたCSSにインライン化します。詳細については、バンドルのインライン化を参照してください。

.logo {
  background: url('data-url:logo.svg');
}

JavaScript内のSVG

SVGファイルは、JavaScriptから外部URLとして参照するか、文字列としてインライン化するか、ReactなどのフレームワークでレンダリングするためにJSXに変換できます。

URL参照

Parcelは、`URL`コンストラクターを使用してSVGファイルを参照することをサポートしています。この例では、結果を使用してJSXで`<img>`要素をレンダリングします。これは、上記の外部SVGで説明したのと同じように機能します。 SVGがインタラクティブであるか外部リソースを持っている場合は、代わりに`<object>`要素を使用できます。

const logo = new URL('logo.svg', import.meta.url);

export function Logo() {
  return <img src={logo} alt="logo" />;
}

詳細については、JavaScriptドキュメントのURLの依存関係を参照してください。

文字列としてのインライン化

SVGは、`bundle-text:`スキームを使用してインポートすることにより、JavaScriptで文字列としてインライン化できます。

import svg from 'bundle-text:./logo.svg';

let logo = document.createElement('div');
logo.innerHTML = svg;
document.body.appendChild(logo);

詳細については、バンドルのインライン化を参照してください。

Reactコンポーネントとしてのインポート

`@parcel/transformer-svg-react`プラグインを使用して、SVGファイルをReactコンポーネントとしてインポートできます。これは、SVGRを使用してSVGファイルをJSXに変換します。また、SVGOを使用してSVGを最適化し、ファイルサイズを削減します。

このプラグインはデフォルトのParcel設定には含まれていないため、インストールして`parcelrc`に追加する必要があります。

yarn add @parcel/transformer-svg-react --dev

`parcelrc`を設定してすべてのSVGをJSXに変換するか、名前付きパイプラインを使用してJavaScriptインポートステートメントから参照できるURLスキームを作成できます。この方法では、JavaScriptから参照されるSVGファイルはJSXに変換されますが、他の場所から参照されるSVGファイルはSVGファイルのままになります。 `"..."`構文を使用して、SVGをJSXに変換する前に、デフォルトのSVGトランスフォーマーを最初に実行します。

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
  }
}

example.jsx

import Icon from "jsx:./icon.svg";

export const App = () => <Icon />;

本番環境

本番環境モードでは、Parcelにはコードのファイルサイズを削減するための最適化が含まれています。これらの仕組みの詳細については、本番環境を参照してください。

縮小

本番環境モードでは、Parcelはコードを自動的に縮小して、バンドルのファイルサイズを削減します。デフォルトでは、ParcelはSVGOを使用してSVGの縮小を実行します。

SVGO を設定するには、プロジェクトのルートディレクトリに svgo.config.json ファイルを作成します。SVGO の利用可能な設定オプションをすべて確認するには、公式ドキュメントを参照してください。

svgo.config.json

{
  "plugins": [
    {
      "name": "preset-default",
      "params": {
        "overrides": {
          "inlineStyles": false
        }
      }
    }
  ]
}

**注意**: JavaScript ベースの設定として svgo.config.js、svgo.config.mjs、svgo.config.cjs もサポートされていますが、Parcel のキャッシュの有効性を低下させるため、可能な限り避けるべきです。代わりに JSON ベースの設定形式を使用してください。