SVG

SVG 是一種基於 XML 的向量化 2D 圖形格式，支援互動性和動畫。Parcel 包含對 SVG 的支援，作為一個獨立檔案、嵌入在 HTML 中，或作為 JSX 匯入 JavaScript 檔案中。

相依性

Parcel 會偵測 SVG 中大多數對其他檔案的參照（例如 <script>、<image> 和 <use>），並加以處理。這些參照會被改寫，以便連結到正確的輸出檔案。

檔案名稱會相對於目前的 SVG 檔案解析，但你也可以使用絕對和波浪號規格說明。詳情請參閱相依性解析。

樣式表

外部樣式表可以在 SVG 文件中透過 xml-stylesheet 處理指令參照。你可以參照 CSS 檔案，或任何編譯成 CSS 的其他檔案，例如 SASS、Less 或 Stylus。

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;
}

有關 CSS 如何由 Parcel 處理的詳細資訊，請參閱 CSS 文件。

腳本

<script> 元素可用於從 SVG 參照腳本檔。您可以參照 JavaScript 檔，或任何編譯成 JavaScript 的其他檔，例如 TypeScript、JSX 或 CoffeeScript。

type="module" 屬性應可用於指出一個檔案是一個 ES 模組或 CommonJS 檔案。如果省略它，則參照的檔案會被視為經典腳本。請參閱經典腳本以取得更多相關資訊。ES 模組尚未在 SVG 中原生支援，因此 Parcel 會將所有 JavaScript 編譯成經典腳本，即使撰寫為模組也是如此。

注意：SVG 使用 href 屬性，而不是 src 屬性，用於 <script> 元素。

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');
});

請參閱 MDN 文件以取得更多關於 <script> 元素的資訊，以及 JavaScript 文件以取得 Parcel 如何處理 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> 元素連結到其他網頁或檔案。Parcel 支援 href 和 xlink:href 屬性。

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

雖然從 SVG 檔案參照的其他資產會在其編譯檔名中包含內容雜湊，但由 <a> 元素參照的檔案不會。這是因為這些 URL 通常是人類可讀的，且需要隨著時間推移而擁有穩定的名稱。套件命名可以由 Namer 外掛程式覆寫。

外部參照

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>

也支援透過 url() 函式在簡報屬性中參照的外部資源，例如 fill、stroke、clip-path，以及許多其他屬性。

<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` 屬性

可以在任何 SVG 元素上使用 style 屬性來定義 CSS 樣式。Parcel 會處理內嵌 CSS，並將結果插入回 style 屬性中。這包括遵循參照的 URL，以及為目標瀏覽器轉換現代 CSS。

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

HTML 中的 SVG

SVG 在 HTML 中可以作為外部檔案參照，或直接嵌入 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> 元素可用於在 HTML 中嵌入外部 SVG，並啟用外部參照、指令碼、互動性和文字選取。使用 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、內嵌為字串，或轉換為 JSX 以在 React 等架構中進行渲染。

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，或使用命名管線來建立 URL 架構，您可以從 JavaScript 匯入陳述式中參照它。此方法允許從 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
        }
      }
    }
  ]
}

注意：svgo.config.js、svgo.config.mjs 和 svgo.config.cjs 也支援基於 JavaScript 的設定，但應盡量避免使用，因為這會降低 Parcel 快取的效能。請改用基於 JSON 的設定格式。

相依性

樣式表

腳本

影像

連結

外部參照

內嵌腳本和樣式

內嵌 style 屬性

HTML 中的 SVG

外部 SVG

內嵌 SVG

CSS 中的 SVG

JavaScript 中的 SVG

URL 參照

內嵌為字串

匯入為 React 元件

生產

縮小

內嵌 `style` 屬性