Preserve other CSS classes

Hello,

Thanks for using my plugin.

The classes are removed because the IMG tag is removed. The default style-svg class is used to target and swap with inline SVG code.
At this point, original IMG classes are not preserved, but you can put any classes you like inside the SVG itself.

I hope this helps.

I understand this, but how can i put classes in the SVG? Even using JS, i’m not able to identify the SVG anymore, since the class i used to check was removed.

Maybe you can try to merge attributes from the IMG tag (like ID, other classes and data-*). An example of this is the SVG converter from the UIKit framework

You can just open your SVG file in a code editor and add the classes to the SVG or elements within it directly. SVG files are just XML code.

• This reply was modified 6 years, 10 months ago by Benbodhi.

I understand that, but i’m talking about an user without experience with SVG and HTML. In my case, i will just tell the user to download the SVG from an list on an site, upload it to the post and add my class, then i will animate it.

I would like to integrate with your plugin to make the process easier, but i need something to find the SVG’s that will be animated.

If you have any reason to not preserve attributes that will not interfere with the current working flow, please tell me. I’m getting examples from other libraries that does the same thing, but they’re not integrated with WordPress and that’s the reason i wan’t to use the SVG support plugin.

My plugin actually adds classes to the SVG. One is common to all SVG files that have been rendered inline and each one also gets a numbered unique class. So I’m sure you could target those. That way a non coder doesn’t have to actually set classes or anything.

I understand, but how can the non-coder select witch SVG they want to animate? i don’t want to do this in all SVGs, only the ones he desire…

I think I’ll need to know exactly what you are trying to achieve to understand and come up with the best way to do it.

From what I can tell, it sounds like you’re writing an SVG animation plugin? The more detail you can provide, the better I will be able to help you.

If you just add the custom classes you want, my plugin does actually retain them…

For example, if you use:

<img src="https://yoursite.com/wp-content/uploads/your-file.svg" class="style-svg keepthisclassfromeditor"/>

Both classes will be retained even if the SVG is rendered inline, looking like this:

<svg id="svg-replaced-0" class="style-svg keepthisclassfromeditor replaced-svg svg-replaced-0"></svg>

There is a setting in my plugin that auto removes classes as you embed files into the editor… Maybe you have that on? But if you have classes typed in to the editor, they will be retained on the front end.

• This reply was modified 6 years, 10 months ago by Benbodhi.

That’s exactly what i need, but i can’t found this setting you’ve told me…

The only setting related to this is the Automatically insert class?. But this setting should only add the plugin class right? it should remove other classes too?

I’m developing an svg animation plugin, if you want, check https://github.com/viewup/wp-vivus-svg . I recommend your plugin to help the user to create the animation.

Yes, turn that setting off and you’re good to go. It does add the class, but does also remove the extra code that isn’t needed for a typical inline SVG, so in your case, removing the other classes.

I’d be interested in seeing your plugin in action. I’ve been thinking about adding some form of animation for quite some time.. but I have found that it’s usually easier to just animate the SVG itself and then render it inline.

IS there a way tu automatically add the class but allow to keep other inserted classes?

You can already test the plugin, just add the animate-svg class to the svg tag. you will like it.

At the moment there is not. I think this is a pretty edge use case.
It’s really simple for the user to add the class themselves… I don’t believe they would be using my plugin for inlining SVG and yours for animation if they did not know how to add a class to their tag.

I will have a play with your plugin as soon as I get a chance, I’m definitely intrigued. How can it possibly animate something with out set animation parameters?… I will surely find out as soon as I check.

There is the point: the user CAN set the animation parameters. The plugin set the defaults like type, speed, etc but the user can use data-[the setting] on the HTML tag to define it. But if the plugin removes all the attributes it will not work…

I will on the future create an UI to allow the user to configure the animation, but for now, i’m focused on get it working for my projects (and others that would like to use it).

About the case, i don’t think this is an edge case. The SVG support setting says:

Checking this will make sure that either the default class or the custom one you set below is inserted into the style attributes of img tags when you insert SVG images. Additionally, it will remove all of the default WordPress classes. It will leave normal image types as default and only affect SVG files.

So, it should only remove the WordPress default classes, not remove everything defined. That’s my point: there is no reason to clean everything on the tag, just the things you need to clean.

Additionally, you can split the setting in two: one for add the class automatically, other to remove other classes. This will allow more control and customization, removing unexpected behaviors.

• This reply was modified 6 years, 10 months ago by viewup.

Hey,

Sorry for the delay!

Ok, I understand what you’re saying, but that setting is super minimal and is just a little helper for people who use a lot of SVG files and don’t need to set classes on them or anything. I would suggest just leaving that setting switched off.

I have certainly taken note though and will look at possibly splitting this setting up in some way or just removing the part that removes classes. The whole point of it was to simply add the class automatically. The addition of removal of classes was an afterthought.