IllustratorでSVGを書き出す際の注意点

Illustratorから書き出したSVGを支給してもらうことがあったのですが、SVGタグとして埋め込もうとした際にうまくいかないことがあったのでメモ。

設定内容

例として、Illustratorで以下のようなデータを用意しました。

ファイル > 別名で保存 を選択して、ファイルの種類をSVGにして保存します。

SVGオプションは特に変更せずにOKにします。

以下のようなSVGファイルが書き出されました。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#FF0000;}
	.st2{fill:#0000FF;}
	.st3{fill:#FFFF00;}
</style>
<g id="red">
	<rect x="50.5" y="70.5" class="st0" width="79" height="79"/>
	<path class="st1" d="M129,71v78H51V71H129 M130,70H50v80h80V70L130,70z"/>
</g>
<g id="blue">
	<rect x="60.5" y="60.5" class="st0" width="79" height="79"/>
	<path class="st2" d="M139,61v78H61V61H139 M140,60H60v80h80V60L140,60z"/>
</g>
<g id="yellow">
	<rect x="70.5" y="50.5" class="st0" width="79" height="79"/>
	<path class="st3" d="M149,51v78H71V51H149 M150,50H70v80h80V50L150,50z"/>
</g>
</svg>

このSVGのみの場合は特に問題なく埋め込めました。
SVG埋め込みのデモページ

以下のデータを別途用意して、同じように書き出します。

以下のようなSVGファイルが書き出されました。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#93278F;}
	.st2{fill:#603813;}
</style>
<g id="black">
	<circle class="st0" cx="90" cy="110" r="29.5"/>
	<path d="M90,81c15.99,0,29,13.01,29,29s-13.01,29-29,29s-29-13.01-29-29S74.01,81,90,81 M90,80c-16.57,0-30,13.43-30,30
		s13.43,30,30,30s30-13.43,30-30S106.57,80,90,80L90,80z"/>
</g>
<g id="purple">
	<circle class="st0" cx="100" cy="100" r="29.5"/>
	<path class="st1" d="M100,71c15.99,0,29,13.01,29,29s-13.01,29-29,29s-29-13.01-29-29S84.01,71,100,71 M100,70
		c-16.57,0-30,13.43-30,30s13.43,30,30,30s30-13.43,30-30S116.57,70,100,70L100,70z"/>
</g>
<g id="brown">
	<circle class="st0" cx="110" cy="90" r="29.5"/>
	<path class="st2" d="M110,61c15.99,0,29,13.01,29,29s-13.01,29-29,29s-29-13.01-29-29S94.01,61,110,61 M110,60
		c-16.57,0-30,13.43-30,30s13.43,30,30,30s30-13.43,30-30S126.57,60,110,60L110,60z"/>
</g>
</svg>

これを先ほどのデモのSVGに埋め込むと、最初のSVGの色が変わってしまいました。
SVG埋め込みのデモページ2

IllustratorでSVGを書き出した際、デフォルトだとSVG内のスタイル設定にclassが使われているのですが、そのclassが.stXの形の連番で設定されるため、別種のSVGを埋め込んだ際にスタイルが上書きされる問題が発生します。

SVGオプションで詳細オプションを選択して、CSSプロパティをスタイル要素からプレゼンテーション属性に変更します。

以下のようなSVGファイルが書き出されました。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g id="red">
	<rect x="50.5" y="70.5" fill="#FFFFFF" width="79" height="79"/>
	<path fill="#FF0000" d="M129,71v78H51V71H129 M130,70H50v80h80V70L130,70z"/>
</g>
<g id="blue">
	<rect x="60.5" y="60.5" fill="#FFFFFF" width="79" height="79"/>
	<path fill="#0000FF" d="M139,61v78H61V61H139 M140,60H60v80h80V60L140,60z"/>
</g>
<g id="yellow">
	<rect x="70.5" y="50.5" fill="#FFFFFF" width="79" height="79"/>
	<path fill="#FFFF00" d="M149,51v78H71V51H149 M150,50H70v80h80V50L150,50z"/>
</g>
</svg>

classを使用しない形に変更したので、他のSVGを埋め込んだ際も影響しなくなりました。
SVG埋め込みのデモページ3

別の書き出し方法の場合も試してみます。
ファイル > 書き出し > 書き出し形式 を選択して、ファイルの種類をSVGにして保存します。

SVGオプションは特に変更せずにOKにします。

以下のようなSVGファイルが書き出されました。

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-2 {
        fill: blue;
      }

      .cls-3 {
        fill: red;
      }

      .cls-4 {
        fill: #ff0;
      }
    </style>
  </defs>
  <g id="red">
    <rect class="cls-1" x=".5" y="20.5" width="79" height="79"/>
    <path class="cls-3" d="M79,21V99H1V21H79m1-1H0V100H80V20h0Z"/>
  </g>
  <g id="blue">
    <rect class="cls-1" x="10.5" y="10.5" width="79" height="79"/>
    <path class="cls-2" d="M89,11V89H11V11H89m1-1H10V90H90V10h0Z"/>
  </g>
  <g id="yellow">
    <rect class="cls-1" x="20.5" y=".5" width="79" height="79"/>
    <path class="cls-4" d="M99,1V79H21V1H99m1-1H20V80H100V0h0Z"/>
  </g>
</svg>

この場合も他のSVGを埋め込んだ場合、classが重複して影響が出ます。
SVG埋め込みのデモページ4

SVGオプションでスタイルを内部CSSからプレゼンテーション属性に変更して保存します。

以下のようなSVGファイルが書き出されました。

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g id="red">
    <rect x=".5" y="20.5" width="79" height="79" fill="#fff"/>
    <path d="M79,21V99H1V21H79m1-1H0V100H80V20h0Z" fill="red"/>
  </g>
  <g id="blue">
    <rect x="10.5" y="10.5" width="79" height="79" fill="#fff"/>
    <path d="M89,11V89H11V11H89m1-1H10V90H90V10h0Z" fill="blue"/>
  </g>
  <g id="yellow">
    <rect x="20.5" y=".5" width="79" height="79" fill="#fff"/>
    <path d="M99,1V79H21V1H99m1-1H20V80H100V0h0Z" fill="#ff0"/>
  </g>
</svg>

これで他のSVGを埋め込んだ際に影響しなくなりました。
SVG埋め込みのデモページ5