svg not interactive

  • Resolved lauperi

    (@lauperi)


    8 years, 1 month ago

    Hi, I created an interactive svg file with inkscape, it is working well in all different web-browsers. When you click on different parts of it, is taking you to different websites. I installed the plugin and activated the advanced settings to allow for interactivity (checked “automatically insert class”). I can see the svg file in the library, when I add it to my post using the “Add media” button from the library I get:

    [gview file=”myfile.svg”]

    the picture with no interactivity shows up in the preview and below there is a link: “Download (SVG, Unknown)”, if I click on it it takes me to a new window and now it is interactive (?)

    If add it via inserting the url, I get:

    the imagen shows up in the preview but no interactivity.

    I added Class=”style-svg” but doesn’t work.

    The class is not being added automatically, seems that is not being recognized (?). Maybe some conflict or is being blocked (?)

    Thanks for your help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    8 years, 1 month ago

    Hello,

    You most certainly have something else causing issues if you get a shortcode when placing your images into your post/page.

    You don’t need to use the “auto insert class” feature, that is just to automatically write the class="style-svg" for you, but it also removes other attributes.

    You basically just need to put this in your post/page (text editor):
    <img class="style-svg" src="YOUR_IMG_URL" />

    And that should render your SVG inline, therefore keeping your interactive elements of the SVG.

    If you still have issues, please try deactivating all other plugins and reverting to the default WP theme and trying again. Then if it’s all good at that point, you’ll need to reactivate each plugin and your theme one by one, testing in between so you can find the culprit.

    Let me know how you go. I’ll try and help if you continue to have issues.

    Thread Starter lauperi

    (@lauperi)

    8 years, 1 month ago

    Thanks for the response, I tried <img class="style-svg aligncenter" src="http://myfile.svg" />
    The picture is there but it is not interactive.
    I’ll check if there is a plugin conflict.

    • This reply was modified 8 years, 1 month ago by lauperi.
    • This reply was modified 8 years, 1 month ago by lauperi.
    Plugin Author Benbodhi

    (@benbodhi)

    8 years, 1 month ago

    If you can provide a link so I can take a look at the front end, I’ll be able to see if it’s rendering inline or not and may be able to provide more insight.

    Thread Starter lauperi

    (@lauperi)

    8 years, 1 month ago

    This is the link: http://elearn.ucalgary.ca/intro-to-d2l/

    Now is working fine 🙂 I just need to make it responsive. Any advice on that?

    I had to deactivate a plugin for embedding google docs (that one was not being used anyways) for the “auto insert class” to work. Now I can insert svg files from “add media” without any problem.

    W3 Total Cache plugin was somehow creating some conflict with the interactivity, once deactivated it start working. Do you have any idea why is that?

    Thank you so much for your help!

    Plugin Author Benbodhi

    (@benbodhi)

    8 years, 1 month ago

    Glad you found the issue.

    You might have more luck making sure that everything is expanded and outlined in your SVG file before uploading to your site.

    Thread Starter lauperi

    (@lauperi)

    8 years, 1 month ago

    Thanks a lot! I did some changes in my SVG and now if fully responsive.

    Plugin Author Benbodhi

    (@benbodhi)

    8 years, 1 month ago

    Amazing, thanks for letting me know 🙂

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

The topic ‘svg not interactive’ is closed to new replies.