search

svg-sprite / gulp-svg-sprite

SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours
MIT License
648 stars 43 forks source link

Adobe Illustrator generated svg files are not getting sprited #31

Closed rathishcholarajan closed 9 years ago

rathishcholarajan commented 9 years ago

Because of these attributes on the SVG element 

xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"

when I try to run svg-sprite on files like this it fails with the following error

events.js:72 throw er; // Unhandled 'error' event

Error: Skipping "%s" (%s)

I guess the SAX parser in SVGO is not recognizing this as valid syntax. Any way to turn this strict mode off from gulp-svg-sprite?

My SVG file looks like this

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="51px" height="51px"
     viewBox="0 0 51 51" enable-background="new 0 0 51 51" xml:space="preserve">
<switch>
    <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
        <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
        </i:pgfRef>
    </foreignObject>
    <g i:extraneous="self">
        <g>
            <g>
                <circle fill="#FFFFFF" cx="25.5" cy="25.5" r="25"/>
                <path fill="#D0D2D3" d="M25.5,51C11.4,51,0,39.6,0,25.5S11.4,0,25.5,0C39.6,0,51,11.4,51,25.5S39.6,51,25.5,51z M25.5,1
                    C12,1,1,12,1,25.5C1,39,12,50,25.5,50S50,39,50,25.5C50,12,39,1,25.5,1z"/>
            </g>
        </g>
        <g>
            <rect x="11.4" y="10" fill="#00A6A0" width="6.7" height="28"/>
            <rect x="28.1" y="17.8" fill="#00A6A0" width="6.7" height="20.2"/>
            <rect x="18.1" y="22.3" fill="#6E6F71" width="6.7" height="15.7"/>
            <rect x="34.8" y="27.9" fill="#6E6F71" width="6.7" height="10.1"/>
        </g>
    </g>
</switch>
<i:pgf  id="adobe_illustrator_pgf">
    <![CDATA[
    ... lot of data here ...
    ]]>
</i:pgf>
</svg>
jkphl commented 9 years ago

Hey @rathishc24,

that's a good question. In fact, I'm not too much into SVGO, but you should be able to pass any valid configuration to the SVGO process. Please see here for an example enabling / disabling particular SVGO plugins. svg-sprite will use the value of shape.transform.svgo (when given as an object) as argument for the SVGO() constructor, so if SVGO provides the option you need, you should be able to use it.

I'll close this issue for now, as it seems rather SVGO related, but please let me know if there's anything I can do from the svg-sprite side of things.

Cheers, Joschi