Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Embedded svg symbol viewbox not working

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #182891
    MacelRobitaille
    Participant

    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.

    #182921
    Paulie_D
    Member

    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.

    #182926
    MacelRobitaille
    Participant

    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.

    #182933
    Paulie_D
    Member

    There is no extra ‘padding’

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

    #182940
    MacelRobitaille
    Participant

    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?

    #182941
    Paulie_D
    Member

    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.

    #182942
    MacelRobitaille
    Participant

    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.

    #182943
    Paulie_D
    Member

    You’ve only defined one dimension

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

    #182945
    MacelRobitaille
    Participant

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

    #182951
    Paulie_D
    Member

    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

    #182952
    MacelRobitaille
    Participant

    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.

    #182955
    Paulie_D
    Member

    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.

    #182956
    MacelRobitaille
    Participant

    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/

    #235830
    pminf
    Participant

    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”?

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘Other’ is closed to new topics and replies.