New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fragment viewbox off-center #162

Open
coleturner opened this Issue May 25, 2016 · 4 comments

Comments

2 participants
@coleturner

coleturner commented May 25, 2016

The problem I am experience is that my SVG fragments are not centered around the icons in the sprite, and will include surrounding sprites in the final file.

Here is my final SVG sprite:
http://pastebin.com/p0RdNy3M

When I try either the #create-hunt or #create-poll sprite, this is the result:
http://i.imgur.com/mi2k3CJ.png

I am wondering if there's a problem with my configuration, or the sprites that I am using, that would cause the viewbox values to display this way in both Chrome and Firefox.

Here are the configuration options I'm using:

      "shape": {
        "dimension": {
          "maxWidth": 64,
          "maxHeight": 64
        },
        "spacing": {
          "padding": 5,
          "box": "border"
        }
      },
      "mode": {
        "view": {
            "dest": "./",
            "prefix": ".svg-icon-%s",
            "sprite": "sprite.svg",
            "bust": false,
            "render": {
                "scss": true
            }
        }
      }

Thanks!

@jkphl jkphl added the question label Jun 27, 2016

@jkphl jkphl self-assigned this Jun 27, 2016

@jkphl

This comment has been minimized.

Owner

jkphl commented Jun 27, 2016

@colepatrickturner Please provide the following resources as well:

  • The Sass resource created by svg-sprite
  • The final CSS resource (compiled by your toolchain)
  • The HTML markup you use for displaying the sprite

Thanks!

@coleturner

This comment has been minimized.

coleturner commented Jun 27, 2016

Here is the SASS sprite sheet that was created:
http://pastebin.com/gU0R8s8v

and the final sprite:
http://pastebin.com/p0RdNy3M

However the stylesheet is not relevant as I was using the #fragment method of embedding:
<img src="sprite.svg#create-hunt" alt="">

@jkphl

This comment has been minimized.

Owner

jkphl commented Jun 27, 2016

@colepatrickturner Yeah, you posted the sprite earlier, and it looks good to me. I am not sure if browser support for fragment identifiers is mature enough in the meantime. I will have to test with your markup ...

@coleturner

This comment has been minimized.

coleturner commented Jun 27, 2016

Majority support for <img> svg fragments is there - I've tested boilerplate sprite sheets.

I have a suspicion it has to do with the padding/margin around the sprites, because the viewBox coordinates are wrong - I know that the min-x coordinate of the viewBox for the fragment's view is 8px too far to the left.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment