idsを使ってSketchエクスポートされたSVGを処理する方法

Question

私のページにsvgアイコンを使用したいと思います。私が働いているデザイナーはSketchを使ってイメージをデザインし、結果をsvgにエクスポートします。 スケッチ（id="Page-1"、id="My-Star"とid="Star-1"属性に注意）エクスポートしたコードに様々なidタグを追加します。

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
     <g id="My-Star" stroke="#979797" fill="#D8D8D8"> 
      <polygon id="Star-1" points="11.9860934 18.5835921 5.4876995 22 6.7287823 14.763932 1.47147118 9.63932023 8.73689646 8.58359214 11.9860934 2 15.2352904 8.58359214 22.5007157 9.63932023 17.2434045 14.763932 18.4844873 22 "></polygon> 
     </g> 
    </g> 
</svg> 

私はHTMLで直接SVGが含まれています。これを行うことで、私は同じidを何度も紹介します。この作業方法の結果である無効なhtml以外にも、idに基づいてsvg要素のスタイルを設定する必要があります。これは悪い習慣です。

私はexample

で質問を見て、svgsのスタイルをCSSを使用します。
はスケッチからsvgsをエクスポートするときclass ESでid Sを交換する方法はありますか？私はデザイナーに与えることができるいくつかのプラグインや設定はありますか？ そうでない場合は、デザイナーからsvgアセットを受け取り、ページ内で使用する最適なワークフローは何ですか？

Answer 1

同じ問題が発生したので、プラグインを作成しました。このプラグインでは、スライスからエクスポートされたsvgのすべてのidsがBEMスタイルの名前空間になります。

https://github.com/Knowre-Dev/svg-namespacing

Answer 2

ユニークなグループ名を使用するように設計者を尋ねるよりも良い解決策の他はありませんように見えます。

グループ名は、生成されたSVGのグループIDになります。

Answer 3

私はSketch自体に何も解決策を見出せませんでしたが、PHPを使用して簡単な散策が見つかりました。スケッチでは、私がクラスで始める各グループまたはパスに、aで始まる名前を付けます。ドット（例：.person）を入力し、ファイルをエクスポートします。明らかに、グループはまだid=".person"

を持っている。そして、私はPHPを使用してページへの.svgをロードし、クラス別ドットで始まるすべてのIDを置き換える： <?php echo str_replace('id=".', 'class="', file_get_contents('sample.svg')); ?>

私はそれが理想的ではないのですが、私の場合に動作します知っています。