Home>Support>SVG images only rendering in site logo, not in widgets.

SVG images only rendering in site logo, not in widgets.

By Jay, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello,

I have sort of a strange issue occurring on my newly created site. I don’t receive any errors, just confusing results. Here’s what’s happening.

First off, I changed my .htaccess and functions.php files to enable SVG file uploading on my site. I added

# Add SVG Mime Types
AddType image/svg+xml svg
AddType image/svg+xml svgz

to my .htaccess file, and

/**
 * Add SVG capabilities
 */
function enable_svg_mime_type( $mimes = array() ) {
  $mimes['svg']  = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'enable_svg_mime_type' );

to my functions.php file. I previously tried uploading these files using only an SVG plugin (not modifying the actual files), but the same result. Basically, the only SVG image that renders anywhere on my site is the logo, and even the logo won’t render anywhere else on my site as a widget. I substituted the images I am trying to include in my SiteOrigin Image widget for my main logo and they both render (again, in place of the site logo), so I know they have been uploaded onto my site correctly and that they do render in my browser. For some reason, they just won’t display when inserted into a widget.

The location for the individual images are http://jaysaidit.com/wp-content/uploads/2015/03/submission-icon-open-final.svg and http://jaysaidit.com/wp-content/uploads/2015/03/submission-icon-closed-final.svg. The page where one of these icons is supposed to be rendering right now is in the bottom-left corner of http://jaysaidit.com/about/guests (to the left of the green button). Any idea why they render as a site logo, but not in a widget?

Thank you much!
~ Jay

URL: http://jaysaidit.com/about/guests

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jay

    Could you confirm, have you tried uploading your SVG’s via the Visual Editor widget’s Add Media button? Sounds like you’ve only been using the SiteOrigin Image widget. If so, let’s try the Visual Editor widget and see if we get a different result. If you have issues with that, please also test outside of Page Builder on a page in the regular Visual tab.

    Hopefully this will give us the lay of the land.

  2. 9 years, 6 months ago Jay

    Nope, same blank result when I try to use just the visual tab outside of the page builder; however, I did get it to render when I used the regular Image (PB) widget.

    So to summarize where I’m at now, I created a new page for test purposes and tried both the SiteOrigin Image widget and inserting the image via the visual tab (where I can verify the code has been inserted via the text tab). When I tried using just the Image(PB) widget, though, the image rendered appropriately (just like it does when I insert the image in place of my site’s logo under Appearance > Theme Settings > Logo.

  3. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the effort. To confirm, it’s not possible to edit Page Builder content via the Visual tab so for this test we should ideally have two test pages:

    1. Test page one: Page Builder, we insert a SiteOrigin Image widget AND a Visual Editor widget. If you have Black Studio TinyMCE plugin installed you’ll have access to the Visual Editor widget.

    2. Test page two: That’s where we’d just use the regular Visual tab, no Page Builder.

  4. 9 years, 6 months ago Jay

    Hi Andrew,

    Still no good. Neither option produced a visible image to the new pages. The only way to display them remains either as a logo or through the Image(PB) widget. Could it be a simple wiring issue since the last update?

  5. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Not sure, sorry. Can you send through a link to the SVG file so we can try testing it on our side? Thanks

  6. 9 years, 6 months ago Jay

    How would you like me to send you the link? My original post has the link to where the images are on my site, do you mean include them as an attachment or post the xml so you can recreate the image yourself?

  7. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jay

    Apologies! Your mail slipped through my usual filters.

    Is the submission closed SVG meant to be showing? Have you perhaps made progress?

  8. 9 years, 6 months ago Jay

    Thanks for getting back to me, Andrew.

    The ‘closed submission SVG’ is supposed to be showing because I was able to post it using the regular Image(PB) widget. I still can’t post any SVG images to my site using the visual tab or the SiteOrigin Image widget. It’s bizarre. Would you like me to remove it and re-upload it using one of the problematic methods for you to see again?

    Haven’t tried uploading a regular raster image like .bmp, .gif, or .jpg yet, or tried to upload SVGs using a different theme. Would either of those steps be worth doing to troubleshoot the issue?

  9. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi :) I ran a quick test now using:

    https://wordpress.org/plugins/scalable-vector-graphics-svg/

    and the following test SVG:

    http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg

    The plugin works but the media uploader is outputting the images with a width and height of 1. This is expected though:

    WordPress will give the SVG files a height and width of 1px by 1px when you insert them. This is expected. Remember to change it to something you like.
    http://sterlinghamilton.com/projects/scalable-vector-graphics-svg/

    Once I removed or change the width and height the demo SVG worked in Vantage and Twenty Fifteen theme.

    Could you perhaps give the above steps a try in the regular Visual tab, outside of Page Builder and see if you can get the SVG loading like I did?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More