- This topic is empty.
September 13, 2014 at 4:06 pm #182891
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
Does anyone have any idea how to fix this? Thanks.September 14, 2014 at 3:08 am #182921
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.
viewboxdoes 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.
Also, you might want to use an SVG Optimiser to remove all the extra unneccesary cruft in the SVG code.September 14, 2014 at 6:03 am #182926
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.September 14, 2014 at 6:06 am #182933September 14, 2014 at 6:12 am #182940
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?September 14, 2014 at 6:24 am #182941
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
iconclass), the SVG will scale accordingly.
Perhaps you could make a Codepen with the SVG icon used as its supposed to be used.September 14, 2014 at 6:47 am #182942
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.September 14, 2014 at 6:52 am #182943September 14, 2014 at 7:06 am #182945
I realize that, I’m trying to do it using viewbox.September 14, 2014 at 9:19 am #182951
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?September 14, 2014 at 9:38 am #182952
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.September 14, 2014 at 9:55 am #182955
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
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.September 14, 2014 at 9:58 am #182956
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/December 14, 2015 at 4:13 am #235830pminfParticipant
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”?
- The forum ‘Other’ is closed to new topics and replies.