I have been exploring why our company users are seeing full black artboards or random black fill objects in SVG files produced in the Save As\SVG process, as well as exporting SVG using API developer tools. I know there have already been issues with non-alpha-numeric characters (what I will call “irregular characters”), but the issue we are seeing relates to periods (.) specifically.

When files are saved/exported using Style Elements to drive the CSS, if those style names contain a period, ie: "BLACK STROKE .25pt", the Save As SVG export process allows the CSS class label to contain a period. Since each new style is identified in the code by a period, this essentially produces two class elements within one label position.

This can be reproduced by creating an objects using a Graphic Style they have labeled with a period in the name. Then export that files using "Style elements" in the CSS options under "More options". As it seems the default is to use Style elements, this shouldn't be difficult. Here is my example, one in Illustrator 28.1 and one in 28.7:

Sample from Illustrator 28.1 (legacy SVG export):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.BLACKx0020STROKEx0020x002E25pt{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
</style>
<polygon class="BLACK_x0020_STROKE_x0020__x002E_25pt" points="348.42,239.57 316.16,222.54 283.85,239.46 290.08,203.52
264.01,178.01 300.11,172.83 316.31,140.16 332.39,172.89 368.48,178.2 342.31,203.61 "/>

</svg>

Sample from Illustrator 28.7

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 612 792">
<defs>
<style>
.BLACKSTROKE.25pt {
fill: none;
stroke: #231f20;
stroke-miterlimit: 10;
stroke-width: .25px;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.7.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 136) -->
<g>
<g id="Layer_1">
<polygon class="BLACK_STROKE_.25pt" points="348.42 239.57 316.16 222.54 283.85 239.46 290.08 203.52 264.01 178.01 300.11 172.83 316.31 140.16 332.39 172.89 368.48 178.2 342.31 203.61 348.42 239.57"/>
</g>
</g>

</svg>

In Illustrator 28.1 the SVG save as/export replaces the period in “.25” with “x002E” but in the 28.7 version the period isn’t replaced, the same as with most other irregular characters. The problem is that despite the CSS and the polygon class looking identical, they are not. The polygon is looking for a style with the class label "BLACKSTROKE.25", but as a period (.) identifies a new style label in the CSS, so the CSS list two different styles named "BLACKSTROKE" and "25pt", within one style position.

This can also be observed by saving the code above as an SVG, view it, then delete the two periods in both instances of “.25pt” and view it again.