SVG Export - Style Tag (Angled Apostrophe) Issue
Hi,
I have recently stumbled upon a random issue with exporting SVGs from Illustrator (Desktop). I am recycling some previously used assets that I know work fine and are fully compatible with Articulate Rise (the eLearning tool I import the SVGs to).
For some reason, within the last week or so, something has changed. Now when I try to import my SVGs to Articulate, I get an error saying the file type is invalid. Having investigated this with the Articulate support team, we discovered that during the export process, Illustrator is adding a random invalid character (this one (`)).
See attached images for reference.
I can edit the styling using SVG viewer, but it's slowing down our output immensely and I'm not sure what has changed? I know for a fact these images work fine in the current courses they sit in.
Note: If I ungroup the assets on the banner image, and export them as SVGs, they all import fine and don't have the angled apostrophe. If I group them together, however, the apostrophe appears! The obvious solution would be to ungroup and collect as a single asset, which I've tested and unfortunately, this still presents the same issue. I've also tested grouping newly created assets together there are no issues.
Hopefully, someone out there can help out with this!
Thanks in advance,
Steph
Steph
shared this idea
-
Ten_A
commented
プラットフォーム
macOS 10.15.7
Illustrator ver.26.2.1スクリーン用に書き出しを利用してSVGを書き出す際、形式の設定の縮小をチェックすると内部CSSのIDに利用出来ないキャラクタが含まれるために正常にブラウザ等でCSSを読めずにレンダリングが正常に行われない。
1.ある程度の規模のIllustratorファイルを用意する。
2.スクリーン用書き出しダイアログを開き「スタイル→内部CSS」、「縮小チェックボックス」をチェックした上でアートボードを書き出す。
3.書き出されたSVGファイルのID等にnameCharに定義されていないU+0060（`）が含まれるために正常にCSSがリンクしない。期待する結果
縮小チェックを入れない場合と同様に正常にCSSがレンダリングされる。実際の結果
CSSが認識されない為に期待した表示とならない。以下のコミュニティスレッドの指摘の通り、本来なら「z」が入るべき所がU+0060となっています。これを是正するためにはテキストエディタにて「`」を「z」に置換するか「縮小」を回避することで期待した出力結果を得られます。単純に許容されている文字コードのレンジを実装上ずらしてしまった結果かと考えます。
この不具合は小規模のふファイルではU+0060が利用されるまでIDが生成されない為にある程度の規模でないと再現されません。この事から他のSVGに関するUservoice上の報告もこれに類する状態なのかもしれません。サンプルとして３つのSVGファイルを用意しました。
アートボード 1_output.svgは縮小を有効にしたSVGです。グラデーション部分のCSSがリンクされず黒にフォールバックします。
アートボード 1_noreduce..svgは縮小を無効にした状態で書き出されたSVGです。こちらは正常にレンダリングされます。
アートボード 1_edit.svgはアートボード 1_output.svgをテキストエディタで開き「`」を「z」に一括置換し上書き保存したものです。※SVGはアップロード不可能ですから、わたしのクラウド上で共有します。
https://shared-assets.adobe.com/link/b499977a-b86f-4040-6d09-b2de3fac4cbc