SVG not scaling to screen width

  • Resolved ozmatflc

    (@ozmatflc)


    4 years, 1 month ago

    If I create a large SVG image (large as it width is wider than my screen), upload it and insert it to a post, the image is not scaling to the screen width. Instead it is clipped and rendering off-screen. I want it to scale to fit the width of the page automatically. I have advanced option enabled to embed in-line, because there are links within the SVG file that I want users to be able to click on. It’s worth noting that the image is scaled properly in the editor.

    • This topic was modified 4 years, 1 month ago by ozmatflc.
Viewing 1 replies (of 1 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    You have a couple of options.

    1. Just scale it to a default size you’d be happy with prior to upload. Since it is an SVG file, it can be scaled from/to any size (if it is a true vector).

    2. Set its width using CSS. You can target that particular SVG itself, or potentially just set SVG files to max width of 100% in your theme so it never goes outside it’s parent element using something like the following:

    img[src$=".svg"] {
    width: 100%;
}

    I just realised as I typed this 2nd option, that you need it inline. That will only target SVG files in IMG tags.

    You’ll just need to set the max width on the SVG itself. I left the other solution there because it may help others trying to get their SVG files to stay inside the page width when using a standard implementation.

    Just set max-width: 100%; on your SVG and it should stay inside.

    Let me know if I can be of any further help.

Viewing 1 replies (of 1 total)
  • The topic ‘SVG not scaling to screen width’ is closed to new replies.