ID's being changed

[rctneil]

I have an SVG of the Flickr logo to which I added an ID to each circle so I could fill them via CSS later.

When using SVGStore it seems to change the ID's

My id that was set on one circle was left and svgstore has changed it to svgstore4774e1d17249478ca0e984fea77cc9f4left

Why has it done this and how can I keep my original id's?

I do not have the cleanup option enabled.

Thanks

[FWeinb]

An Id must be unique in the document so svg-store prefixes each I'd by the file hash. You should not use IDs for styling anyway. So use a class to style the svg.

[rctneil]

I've just tried this by changing the id's on the two circles inside my SVG to classes and then targeted the classes from my CSS but it doesn't work. I thought elements inside SVG's could only be styled from CSS via id's?

[FWeinb]

It's working for me see: http://codepen.io/FWeinb/pen/1b9e5c5db92f95f19090dbd0f7bbdbcf

[rctneil]

I'll have another go. Must have missed something. Thanks

[joeldbirch]

I'm having the same problem when I <use/> symbols within my svg files, which must be done via id.

[FWeinb]

@joeldbirch
Can you provide an example? References in the resulting svg should be maintained.

[joeldbirch]

This example SVG file uses a #menu-pill symbol for the lines of the hamburger icon:

<svg width="44px" height="39px" viewBox="0 0 44 39">
    <symbol viewBox="0 0 44 6" id="menu-pill"><title>menu-pill</title> <rect fill="currentColor" x="0" y="0" width="44px" height="5px" rx="3px" ry="3px"/></symbol>
    <text transform="matrix(1 0 0 1 0.1514 38)" fill="currentColor" font-family="'Neue Helvetica eText W01', sans-serif" font-size="15.5">menu</text>
    <use xlink:href="#menu-pill"  width="44" height="6" x="-22" y="-3" transform="matrix(1 0 0 -1 22 21)" overflow="visible"/>
    <use xlink:href="#menu-pill"  width="44" height="6" x="-22" y="-3" transform="matrix(1 0 0 -1 22 12)" overflow="visible"/>
    <use xlink:href="#menu-pill"  width="44" height="6" x="-22" y="-3" transform="matrix(1 0 0 -1 22 3)" overflow="visible"/>
</svg>

Putting that through Svgstore results in something like this:

<svg>
    <symbol viewBox="0 0 44 39" id="menu-icon"><title>menu-pill</title> 
        <symbol viewBox="0 0 44 6" id="svgstore7948d8654bb5e4abd186ea603b4da4c4menu-pill"> <rect fill="currentColor" x="0" y="0" width="44px" height="5px" rx="3px" ry="3px"/></symbol> 
        <text transform="matrix(1 0 0 1 0.1514 38)" fill="currentColor" font-family="&#x27;Neue Helvetica eText W01&#x27;, sans-serif" font-size="15.5">menu</text> 
        <use xlink:href="#menu-pill" width="44" height="6" x="-22" y="-3" transform="matrix(1 0 0 -1 22 21)" overflow="visible"/>
        <use xlink:href="#menu-pill" width="44" height="6" x="-22" y="-3" transform="matrix(1 0 0 -1 22 12)" overflow="visible"/>
        <use xlink:href="#menu-pill" width="44" height="6" x="-22" y="-3" transform="matrix(1 0 0 -1 22 3)" overflow="visible"/>
    </symbol>
</svg>

Maybe symbol elements are not allowed inside other symbol elements? I'm currently working around this by including #menu-pill as a seperate file and using it within a #menu-icon file, but it seems weird that it isn't contained in one file, which is then not editable via Illustrator.

[joeldbirch]

The spec suggests that symbols may nest other symbols as they fall under the category of "structural elements".

[FWeinb]

@joeldbirch Thanks! This is fixed in 0.3.3

[joeldbirch]

Brilliant! Love your work, it has massively improved my workflow and I wouldn't want to be without it. Thanks.

[mvaneijgen]

Isn't it better to change the ID to a class instead of giving it a random hash?

[FWeinb]

These id's need to be preserved because they are used to cross reference patterns or gradients. And the hash is needed to be sure they are unique across the whole document.

Am 25.08.2014 um 21:01 schrieb Mitchel van Eijgen [email protected]:

Isn't it better to change the ID to a class instead of giving it a random hash?

—
Reply to this email directly or view it on GitHub.

[IanOliver]

I'm experiencing a similar issue. I'm maintaining a library of icons via 100 artboards in Illustrator. The artboard names are output as the filenames, and these are later used as the symbol ID by grunt-svgstore.

However, you can also name individual paths in Illustrator, the wheels on a car for instance, and these names are output as an ID on each path/shape.

(As a sidenote, I'm running the SVGs through grunt-svgmin prior to svgstore, but I've made sure grunt-svgmin is leaving the IDs alone).

grunt-svstore is modifying the IDs by prepending a long string like so:

<symbol id="car" ...>
    <title>...</title>
    <path id="svgstore2a644b6624aacdae6a6a951fcb9edd84front-wheel" d="..." />
    <path id="svgstore2a644b6624aacdae6a6a951fcb9edd84back-wheel" d="..." />
    <path id="svgstore2a644b6624aacdae6a6a951fcb9edd84body" d="..." />
</symbol>

I'm assuming this is for identification purposes so svgstore can 'smoosh' the correct paths into each symbol - is it possible to remove them afterwards though?

[FWeinb]

svgstore is prefixing each ID with the md5 hash of the original file because an ID must be unique across the whole document.

I can create a option to disable this but if there are two IDs named foo in the resulting document it will make the document unusable.

Am 26.08.2014 um 15:46 schrieb Ian Oliver [email protected]:

I'm experiencing a similar issue. I'm maintaining a library of icons via 100 artboards in Illustrator. The artboard names are output as the filenames, and these are later used as the symbol ID by grunt-svgstore.

However, you can also name individual paths in Illustrator, the wheels on a car for instance, and these names are output as an ID on each path/shape.

(As a sidenote, I'm running the SVGs through grunt-svgmin prior to svgstore, but I've made sure grunt-svgmin is leaving the IDs alone).

grunt-svstore is modifying the IDs by prepending a long string like so:

<symbol id="car" ...>
<title>...</title>




I'm assuming this is for identification purposes so svgstore can 'smoosh' the correct paths into each symbol - is it possible to remove them afterwards though?

—
Reply to this email directly or view it on GitHub.

[IanOliver]

I see, that makes sense, thanks.

If filenames/IDs are being used for the symbols themselves and are already unique (I guess they'd have to be otherwise the two files couldn't both exist), would it be possible to use these as a prefix instead of the hash? Something like this:

<symbol id="car" ...>
    <title>...</title>
    <path id="car-front-wheel" d="..." />
    <path id="car-back-wheel" d="..." />
    <path id="car-body" d="..." />
</symbol>

[FWeinb]

@IanOliver That sounds like a really clever solution. I will look into it.

[FWeinb]

I implemented it the way @IanOliver described it. It will be in 0.4.0

[IanOliver]

Great stuff, thanks @FWeinb. Looking forward to 0.4.0.

[joeldbirch]

Love it, you rock.

[FWeinb]

I just released 0.4.0