SVG-SUPPORT not tranforming 'style-svg' images

Hi,

It looks like you are using a lot of mixed content (http when you should be using https)…
It may have something to do with that. Please make sure your link to the image uses the https protocol and try again. Did you just install the SSL certificate?

Benbodhi, you are just great! Thank you very much for the quick & effective answer.

Riccardo

I’m glad this worked ??
Thanks for your support!

Hi guys,

I am tried to add some svg images, but the animation is missing and I don’t know why.

Please help. I tested with an image from https://concourseiffel.fr/ too
https://panache.testsite.novatise.com/testing-svg/ (Riccardo, just for testing, I hope you don’t mind).

Thanks a lot.

Regards,

Ken

Hi Ken,

Unfortunately, teaching you how to animate your SVG is outside the scope of this plugin.
In the example URL you provided https://panache.testsite.novatise.com/testing-svg/, the SVG has been rendered inline, so my plugin is doing it’s job. It’s up to you now to animate the elements within it ??
Here is a cool resource on how to do that: https://www.hongkiat.com/blog/advanced-svg-animation-css/

PS. @riccardoperello,

Your use of this plugin is awesome! I’d love to create a section in the plugin readme that has a few examples of use cases… Would you mind if I use your site?

Hi Benbodhi,

Thanks for your response. I figured it out by adding some custom CSS code:

/* Animation */

@keyframes moving-lines {
	from {
		stroke-dashoffset: 300px;
	}
	to {
		stroke-dashoffset: 0px;
	}
}
.coming-soon-path {
	stroke-dashoffset: 300;
	stroke-dasharray: 300;
	animation-name: moving-lines;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-delay: 1s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

But is there anyway to include those style into the SVG image directly?

Ken

Hi Ken,

Nice work ??
That is the main purpose of this plugin, to allow you to apply CSS to elements within the SVG.

Personally, I wouldn’t include styles in the SVG itself (not too sure if you can anyway). I put them in the child theme.

BUT, in saying that, it has brought to my attention that it might be useful to create a custom CSS area in the plugin settings, so when using custom SVG’s you could add your custom CSS to the plugin settings so even with a theme change, the SVG customisations would remain ??

Hello Benbodhi & Ken Nguyen,
Personally I create my svg files with Sketch or Illustrator an then I tidy them up because the generated code is not so clean. After that I animate them using js just to give them some classes and mostly CSS from my main css style-sheet.
I do not like to use the “Custom CSS” boxes in plugins because working in a team is better to have just one css (in my case scss) file to work with.

PS: @benbodhi, I am very glad that you like the svg animation, and I don’t mind at all if you’ll use it as an exemple.

Cheers

Riccardo

Hey Riccardo,

That’s pretty much my process for them also ??
Cheers, I should be releasing another update soon.