Skip to main content
Participant
October 30, 2025
質問

SVG 1.1書き出し時にopacityが失われる

  • October 30, 2025
  • 返信数 2.
  • 190 ビュー

こんにちは。Illustrator v29.8.2で、SVG 1.1プロファイルに書き出すと半透明が失われてしまう事象を確認したため共有します。

 

■環境

Adobe Illustrator 29.8.2(28.0.1以降で再現)
macOS Sonoma14.7.1
ブラウザ表示確認: macOS上のChrome/Safariで同様の結果

 

■再現手順

添付のAIファイル「半透明検証2025-10-06-15-15.ai.pdf」をIllustratorで開く
ファイル > コピーを保存 > 書き出し形式 からSVGを選択
SVGオプションで以下2パターンをそれぞれ書き出す
設定A(正常): SVG Profile = SVG Basic 1.1
設定B(不具合): SVG Profile = SVG 1.1
書き出したSVGをブラウザで表示して比較

 

■期待される結果

SVG 1.1でもSVG Basic 1.1と同様に、オブジェクトの半透明(opacity)が保持されること

 

■実際の結果

SVG Basic 1.1: opacity:0.5 が書き出され、ブラウザでも半透明表示される
SVG 1.1: opacity 属性が出力されず、ブラウザでは完全不透明になってしまう

 

■暫定回避策

SVG Basic 1.1で書き出せば透明度は保持されますが、ワークフロー上SVG 1.1が必要なケースでは回避できません。

同様の事象を確認されている方や、設定で解消できた例があれば情報いただけると助かります。よろしくお願いいたします。

返信数 2

Ten A
Community Expert
Community Expert
October 31, 2025

補足しておくと…

 

<style>
.cls-1 {
fill: #1d2088;
}

.cls-1, .cls-2 {
stroke: #231815;
stroke-miterlimit: 10;
}

.cls-2 {
fill: #e60012;
}
</style>

 

このようにstyleからopacityが欠落していますので、必要なところに「opacity: .5;」を足してあげるとOKです。多分SVG保存する前にシンボルへのリンクを外したほうが楽ですけど。

Ten A
Community Expert
Community Expert
October 31, 2025

シンボルに対するopacityがCSSに反映されていないようです。現状、シンボルへのリンクを外すことで正常に書き出されるようになりますが、CSSに手を加えてもよいかと思います。

これ、ver.30で直ってるんですよねぇ…(バグ持ち)