Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 3, 2023 at 8:54 pm #1396588
    Monika

    Hey There,

    i uploaded an animated svg and i can see the animation in the meda library and in the Browser when i just look at the picture (see link below) but as soon as its placed on the website, you cant see the animation. What can I do?

    February 3, 2023 at 11:51 pm #1396615
    Mike

    Hey Monika,
    Thanks for the link to your SVG, below I linked to my test page where the animation is working.
    I installed the SVG Support plugin and enabled the Advanced Mode ▸ Force Inline SVG
    Then I had to set the height and width for the SVG that I placed in an image elegant, I guess you won’t need to do that as you are already seeing the image.

    .wp-image-3772.avia_image  {
	height: 100%;
	width: 100%;
}

    And now the image is animating for me, hopefully this helps.

    Best regards,
    Mike

    February 4, 2023 at 3:05 pm #1396657
    Guenni007

    try to give to the svg an absolute width not percent or vw, vh etc. pp.
    this might be a huge value 1000px f.e. the surrounding container will then limit the size ( in most cases ).

    for example :

    #top #main img[src*=".svg"],
#top #main svg {
  width: 1000px;
}

    another point could be on inline svgs, that your server does not show svgs in a correct content-type ( text/xml ) – it should be handled as : img/svg+xml
    you can try to force it be htaccess file in your route directory :
    put this to your htaccess file:
    AddType image/svg+xml .svg .svgz

    February 4, 2023 at 4:15 pm #1396660
    Mike

    Hi,
    Guenni007 thanks for your input, your css worked good for my demo site:

    #top #main img[src*=".svg"],
#top #main svg {
  width: 1000px;
}

    But the AddType image/svg+xml .svg .svgz in my htaccess file didn’t help.
    I found this article on how to test your site for Support of SVG as img and added the test to my site and it returned true and it showed the test SVG without add your css for width.
    Enfold_Support_280.jpeg
    So it seems my site is supporting SVG as a img without the htaccess code.
    For some reason the animated SVG that Monika linked to needed a width set with css to show on my site, perhaps this was by design, but since it was linked in the Private Content area I don’t think I should share publicly so you can also test, perhaps Monika will post publicly, but it seems the main issue was the animation was not working, hopefully the steps I posted above will help.
    Thanks again Guenni007

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.