Option to remove y-coordinate attribute of SVG images?

[ti&m AG]

Is use this plugin and it works great!

I only have one problem with the generated SVG file. It generates SVG elements with a y-coordinate like this way:

<svg width="120" height="30" viewBox="0 0 120 30" id="my-logo" y="99">
    <path …
</svg>

I use the generated SVG file in this way in my HTML web page:

<svg style="width: 120px; height: 30px;"><use xlink:href="spritemap.svg#my-logo"></svg>

The problem is, that it won't display the my-logo image, because it has a "padding-top" of 99px.
Is there a way that svg-sprite won't set this y-coordinate attribute?

[Joschi Kuphal]

Hi @ti-dev,

thanks for your report. I'm not absolutely sure if this will solve your problem, but you should try using the inline version of the sprite instead. Please try that one and get back to me in case you still face your problem.

Cheers,
Joschi

[ti&m AG]

Hi @jkphl,

thanks for your reply. I think it won't solve my problem. I did for a first check render: { 'inline.svg': true } and I see the output and I see the template file.
The problem is not the template, I need to do manipulations inside this part: {{#svg}} {{{data}}}{{/svg}}.

There is an option layout which I can set to "vertical", "horizontal" or "diagonal". But I need another one that puts every SVG image to the coordinates (0, 0) so they will all overlap. The advantage is, that I can link the SVG image with

<svg style="width: 120px; height: 30px;"><use xlink:href="spritemap.svg#my-logo"></svg>

If there are placed "vertical", a y-ccordinate is put inside the SVG, if it is placed "horizontal", there will be a x-coordinate. With these coordinates, I have to take this value and I have to put it inside the web page for every image and of course I want to avoid this. You see in my HTML snippet that I do not need to set any x-y paddings or define the viewBoxagain. But this is only possible if there are no x / y coordinate inside the SVG. Otherwise the SVG output is perfect to me, I only need the change, that the x / y coordinate will be removed / won't be set.

You see an example of this idea here and the sprite for this example here. The CSS inside the sprite is not neccessary in my case, but this could be done easily with your idea "inline version of the sprite". But you see, the SVG does not have x / y coordinates, all images are top/left 0/0 and overlap. That's what I need and then I can access the images easily. Otherwise, if there are re-arrangements of the images, I have to change all image links in my web pages manually again! I know, if there would be css or sass output, that would be no problem, because the CSS is updated automatically with the image position inside the sprite, but in my case with only SVG I can not use it in this way, because I have to deal with the re-arrangements of the SVG images manually.

Cheers ti-dev.

[Joschi Kuphal]

Hi @ti-dev,

what you are talking about is called sprite stacking (in addition to the <use> method, also very well described by Chris Coyier here) and is currently not supported by svg-sprite / iconizr. I was (and am) thinking about implementing support for it, though, once I find the time. As you surely know, both aspects (sprite stacking and the <use> method) aren't natively supported in a couple of browsers, most notably Internet Explorer, for which you'll need something like SVG for Everybody (which I also contributed to) and other JavaScript helpers to make it work.

As I said, I am thinking about implementing support for stacking, but this is definitely not a focus at the moment. Furthermore, sadly, I'm very very busy these days and won't be able to work on my side projects for a while. So I ask you kindly for some patience.

Cheers,
Joschi

[ti&m AG]

Hi @jkphl,

sprite stacking, I did not know this term, but yes, this is what I want to do.

I also see it is not enough to eliminate the x/y-coordinate, also the width and height attributes should be removed because otherwise I can not resize the SVG image inside my web page: width and height attributes have a higher specificity than my style <svg style="width: 120px; height: 30px;">…</svg>.

I will be patient. I tried it to remove, but it does not work what I did. So it was easier to let the plugin generate the SVG and then to remove the "height", "width" and "y". I do it in this way with grunt-string-replace:

options: {
  replacements: [
    {
      pattern: /\swidth="\S+"/g,
      replacement: ''
    },
    {
      pattern: /\sheight="\S+"/g,
      replacement: ''
    },
    {
      pattern: /\sy="\S+"/g,
      replacement: ''
    }
  ]
}

I know this is not the best way, but the fastest. So no problem, if there are any updates, I will remove the string replacement and use the implemented solution. Maybe I can support you later, but the same as yours, I am unfortunately very busy at the moment.

[Joschi Kuphal]

Glad you can work with that workaround for the moment. Good luck with your projects! :)

[ti&m AG]

Thanks a lot and one more time thank you for this great plugin!

[Joschi Kuphal]

Hi @ti-dev,

I just published the next major release of grunt-svg-sprite. It's rewritten from scratch and now featuring native support for SVG stacks (amongst others) — could you please check this? Hope this is what you were waiting for ... I'll close the issue for now, but please feel free to re-open it in case you've still got problems.

Cheers & a happy new year,
Joschi