Search code examples
htmlsvgtextadobe-illustrator

Ill_Keeping structure of text elements in SVG

When I export AI file to SVG within Illustrator all text elements divided by each symbols into it's own element (see snippet below) in spite that in Ill this is one text element. Is there any way to keep structure of text elements from Ill to HTML?

    </g>
    <text transform="matrix(1 0 0 1 81.1016 620.4326)" font-family="'Calibri'" font-size="24px">S</text>
    <text transform="matrix(1 0 0 1 92.1289 620.4326)" font-family="'Calibri'" font-size="24px">K</text>
    <text transform="matrix(1 0 0 1 104.5977 620.4326)" font-family="'Calibri'" font-size="24px">A</text>
    <text transform="matrix(1 0 0 1 116.6094 620.4326)" font-family="'Calibri'" font-size="24px">T</text>
    <text transform="matrix(1 0 0 1 128.3047 620.4326)" font-family="'Calibri'" font-size="24px">I</text>
    <text transform="matrix(1 0 0 1 134.3516 620.4326)" font-family="'Calibri'" font-size="24px">N</text>
    <text transform="matrix(1 0 0 1 149.8438 620.4326)" font-family="'Calibri'" font-size="24px">G</text>
    </g>

Solution

  • Issue was in SVG Profiles - I just choose SVG 1.1 and it worked.

    SVG Profiles

    SVG Tiny doesn't support many other things, like: gradients, transparency, clipping, masks, symbols, patterns, underline text, strike through text, vertical text, or SVG filter effects. SVG Tiny Plus includes the ability to display gradients and transparency, but does not support clipping, masks, symbols, or SVG filter effects.