Width/height now set as attributes

  • Daniel Hendricks

    (@hendridm)


    7 years, 6 months ago

    Since I updated to 1.8.0, SVGs on the front-end of my site resized (several were no longer full width where they were before). Screenshot: https://snag.gy/1Nb6QI.jpg

    According to the changelog, it appears that this was intentional:

    Pull SVG dimensions from the width/height or viewbox attributes of the SVG.

    Inspecting the element, I see that width and height attributes are now added (I don’t think that they were before? I may be mistaken).

    <img src="https://mysite.com/wp-content/uploads/2018/08/hello-world.svg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Hello World" height="100" width="250" data-large_image_width="4200" data-large_image_height="1680" />

    As a quick fix, I added img[src$=".svg"] { width: 100%; height: auto; } to Customizer > Additional CSS (I targeted my CSS a bit more, but left it generic here for others; caveat emptor; I will appropriately adjust my external sylesheet later). To be fair, I should have been specifying desired sizing more explicitly from the beginning. It’s just a personal blog site, and my usual diligence was evidently not thorough.

    Anyway, I thought I would bring it up since there may be others who had the same thing happen after update. I don’t have a recommended change for the plugin since sizing them in CSS is probably a good habit/most appropriate anyway, though this might cause some issues for neophytes updating the plugin or those that are confused by adding custom CSS where it was “just working” before.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Daryll Doyle

    (@enshrined)

    7 years, 6 months ago

    Hi @hendridm,

    Thanks for posting this.

    You’re correct, in the 1.8.0 release, I did add some code that would pull the dimensions from the SVG directly where possible. This was to solve an issue a lot of people had mentioned over email where their SVGs were getting 0 width when they should have been a fixed size.

    You’re completely correct, targetting your SVGs using CSS and giving them width: 100%; height: auto; should take them back to the same as the previous release 🙂

    I’ve also stickied this post for exposure for now.

    Cheers,
    Daryll

    Sea Jay

    (@jcollier)

    7 years, 5 months ago

    I just started getting this error with RVM maps

    “Damned… Something went wrong ! Please check if name of the map is correct ( place just map name) or if you have uploaded the map previous month and try again uploading map now using wordpress media uploader.”

    I just started getting a similar error with MapSVG, too.

    Is this related?

    Josh Visick

    (@jvisick77)

    7 years, 1 month ago

    Hi Jay,

    I came across this thread because I am trying to get svgs to show width/height attributes when outputting an ACF gallery. I see there is the method to add dimensions when using the wp_get_attachment_image() but when wp_get_attachment_image_src() is called the ‘one_pixel_fix’ method just sets the dimensions to false? Is there a reason the same dimensions aren’t set here as well? That would be what I need to get dimensions in ACF since it uses the _src() function.

    Thanks

    • This reply was modified 7 years, 1 month ago by Josh Visick.
    Thread Starter Daniel Hendricks

    (@hendridm)

    7 years, 1 month ago

    Curious – Why do you need width/height attributes? Can you do it with CSS instead?

    Sea Jay

    (@jcollier)

    7 years, 1 month ago

    Hi, Josh-

    When I upgraded to new versions of SafeSVG and MapSVG, the image behaved correctly and I didn’t have to make changes to the SVG file code.

    I’m afraid I don’t have experience with ACF, but Darryl or Daniel may have some insights.

    -Jay

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Width/height now set as attributes’ is closed to new replies.

Tags