Forums

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

Home › Forums › Other › unresponsive svg…

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 29, 2017 at 7:58 am #254338
    Jaydot
    Participant

    Hi.
    I’m another one of those lurkers who never register until they have a problem, sorry…
    Right now I have a problem with an svg that refuses to act responsively.
    I have an outerdiv, with an innerdiv, and the innerdiv contains an svg as img.
    (Got the svg-file from the designer. It was made in Illustrator, which I don’t have).
    The innerdiv has a max-height and behaves accordingly, but the svg stubbornly retains it’s original dimensions.
    I’m afraid I don’t speak svg.
    Took a look at the svg-file though, and there’s an “overflow=’visible'” in there. I thought that might be the problem, so I removed it, but that didn’t work.
    Could there be something else in an svg-file that causes this behaviour?
    Thanks.

    April 29, 2017 at 9:03 am #254339
    Paulie_D
    Member

    Without seeing the SVG code it’s hard to judge.

    There might be fixed dimension in the SVG code or it might have a fixed viewbox or preseveAspectRatio setting.

    So, we’d need to see it in a Codepen.io demo.

    BUT

    I have an outerdiv, with an innerdiv, and the innerdiv contains an svg as img.

    All of the above assumes you are actually using the SVG as an SVG element and not as an <img> in your HTML. In the latter case…it will act like any other image file.

    April 29, 2017 at 12:31 pm #254343
    Jaydot
    Participant

    Hi,
    Thanks.

    I realised I needed to make a pen after posting, sorry.

    Pen is here.

    As you can see, it is an <img>. That’s why I don’t understand why it’s not resizing.

    April 29, 2017 at 1:06 pm #254344
    Paulie_D
    Member

    Like I said…if you use it an an image it won’t be responsive out of the box…no images are.

    The fact that it’s based on SVG code doesn’t make it less of an image…just like .png or .jpg file.

    April 29, 2017 at 1:23 pm #254345
    Jaydot
    Participant

    Eh… I use .jpgs and .pngs (and .svgs for that matter) all the time without any problem.

    I have a very comparable situation in this pen using a .jpg and it resizes perfectly.

    That is why I think there is something in the svg file that stops it resizing.
    And I don’t know enough about svg to figure out what that could be.

    May 1, 2017 at 5:43 am #254368
    Jaydot
    Participant

    In case anyone wants to know:
    I removed the max-height and added a max-width to the innerdiv.
    Problem solved.

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