HTML向けのSVGエフェクト

- REC

CSSまたはforeignObject要素を使用して、HTML要素にSVG変換、フィルターなどを適用する方法

Chrome

  1. 4 - 123: 部分的なサポート
  2. 124: 部分的なサポート
  3. 125 - 127: 部分的なサポート

Edge

  1. 12 - 18: 部分的なサポート
  2. 79 - 123: 部分的なサポート
  3. 124: 部分的なサポート

Safari

  1. 3.1 - 3.2: 未サポート
  2. 4 - 17.3: 部分的なサポート
  3. 17.4: 部分的なサポート
  4. 17.5 - TP: 部分的なサポート

Firefox

  1. 2: 未サポート
  2. 3: 部分的なサポート
  3. 3.5 - 124: サポート
  4. 125: サポート
  5. 126 - 128: サポート

Opera

  1. 9 - 108: 部分的なサポート
  2. 109: 部分的なサポート

IE

  1. 5.5 - 8: 未サポート
  2. 9 - 10: 部分的なサポート
  3. 11: 部分的なサポート

Chrome for Android

  1. 124: 部分的なサポート

Safari on iOS

  1. 3.2 - 17.3: 部分的なサポート
  2. 17.4: 部分的なサポート
  3. 17.5: 部分的なサポート

Samsung Internet

  1. 4 - 23: 部分的なサポート
  2. 24: 部分的なサポート

Opera Mini

  1. すべて: 未サポート

Opera Mobile

  1. 10 - 12.1: 部分的なサポート
  2. 80: 部分的なサポート

UC Browser for Android

  1. 15.5: 部分的なサポート

Android Browser

  1. 2.1 - 4.3: 未サポート
  2. 4.4 - 4.4.4: 部分的なサポート
  3. 124: 部分的なサポート

Firefox for Android

  1. 125: サポート

QQ Browser

  1. 14.9: 部分的なサポート

Baidu Browser

  1. 13.52: 部分的なサポート

KaiOS Browser

  1. 2.5: サポート
  2. 3: サポート

部分的なサポートとは、フィルターのサポートがないか、エフェクトによるバグのある結果を指します。この方法に代わるCSSフィルター効果仕様が策定中です。

リソース
MDN Web Docs - SVGエフェクトの適用
MDN Web Docs - SVGのその他のコンテンツ
フィルター効果の草案