Embedded svg symbol viewbox not working

[MacelRobitaille]

I am using the svgstore grunt plugin to combine all my svg shapes into one file. I then use php to include the shapes into the document. My problem is when I try to use the shapes, their viewboxes are not respected.

Here is a screenshot showing the problem: http://imgur.com/KLes829

Codepen: http://codepen.io/marcel-robitaille/pen/xhocF

Does anyone have any idea how to fix this? Thanks.

[Paulie_D]

Ok…the codepen is a hot jumble that’s very hard to read so it would be much easier if you tidied it up into something legible.

viewbox does not define the size of the SVG…it defines the co-ordinate boundaries of the symbol.

If you want to size the SVG, use width/height either in the SVG itself or in the CSS.

http://codepen.io/Paulie-D/pen/Kcfgb

Also, you might want to use an SVG Optimiser to remove all the extra unneccesary cruft in the SVG code.

[MacelRobitaille]

Thank you for your response. I set up grunt svgmin, thanks for the suggestion. Here is the more legible codepen: http://codepen.io/marcel-robitaille/pen/xhocF?editors=100

I know viewbox defines what part of the file a given shape takes up. If I add the viewbox to the <svg> tag where I use it, it works as expected: http://codepen.io/marcel-robitaille/pen/sfDlg

All i am trying to to is get rid of the padding around the shape.

[Paulie_D]

There is no extra ‘padding’

http://codepen.io/Paulie-D/pen/tpLcw

[MacelRobitaille]

There is if I remove the viewbox from the <svg> where I use it: http://imgur.com/xmEIap7
That’s the whole point, how do I remove the padding without defining the viewbox on each <svg> tag where I use it?

[Paulie_D]

But you wouldn’t just use an SVG in isolation…it’ll be in a sized element..won’t it?

If you define a size of the element (perhaps with an icon class), the SVG will scale accordingly.

Perhaps you could make a Codepen with the SVG icon used as its supposed to be used.

[MacelRobitaille]

Ok, here is an example used in a calendar: http://codepen.io/marcel-robitaille/pen/uiBrk
The two arrows left of “September” have their viewboxes defined, the two to the right do not. As you can see, there is a lot of undesired white-space.

[Paulie_D]

You’ve only defined one dimension

http://codepen.io/Paulie-D/pen/xdcby

[MacelRobitaille]

I realize that, I’m trying to do it using viewbox.

[Paulie_D]

Why?

That’s not what viewbox is for.

I really don’t understand what it is you are trying to do and your implementation seems odd.

Have you read the workflow docs for Grumpicon?

http://filamentgroup.com/lab/grumpicon-workflow.html

[MacelRobitaille]

Is this not how Chris Coyier does it? Isn’t the viewbox to define what part of the image a shape should take up. I am just trying to remove the white space with viewbox, I will then use width and height to define the dimensions of the image.

[Paulie_D]

Is this not how Chris Coyier does it?

Not sure…do have an example?

Isn’t the viewbox to define what part of the image a shape should take up.

Not as far as I am aware..it’s the coordinate boundaries of the SVG if you define a point outside those boundaries it won’t be seen.

All your points are within those boundaries.

Perhaps you’re conflating viewport with viewbox

http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

You don’t define SVG size by viewbox (AFAIK)…that’s always been done by dimensions.

However, Grumpicon is an icon system using SVG bg imges as sprites (I think) instead of other image types and you don’t seem to be using it correctly…but perhaps I’m misreading it.

However, as we’re not making any progress here, perhaps due to lack of knowledge on my part…I’ll leave you to it.

[MacelRobitaille]

Lack of knowledge on my part more like. Here is an example of Chris Coyier using almost exactly the same technique: https://css-tricks.com/video-screencasts/screencast-134-tour-site-progress-built-jekyll-grunt-sass-svg-system/

[pminf]

Could you please let us know, how you get rid of the unnecessary padding when symbol has it’s own viewbox and only width or height (not both) are defined on the svg?

According to https://css-tricks.com/svg-symbol-good-choice-icons/ I’m trying to accomplish https://css-tricks.com/scale-svg/ (How to Scale SVG to Fit the Available Width (and adjust the height to match) – Option 1)

What was your “lack of knowledge”?

[Author]

Posts