removing class
Closed this issue · 10 comments
I have an issue with removing attributes
$images.shapeSvgConvert({
cleanUp: ['class'],
debug: true
});
Unfortunately it doesnt fix class atribute, also without cleanUp option i removes it.
PS I also had a problem with collection of img whcich was filtered. only $('img') works for me
The 'cleanUp' option should remove all attributes placed in there as an array. Does this work if you put more than 1 item in the array? I'll run some tests, but if you have an example (Codepen or something) I can take a look at that might help.
Similar to your other problem if you have an example. This has only been tested with classes and tags os far so it might be hitting an issue there.
Planning on pushing an update to this in the next week or so which may (Or may not) fix your issues
Can't say right now, because I have dropped idea of drawing svg (thats why I needed inline code), but I have extended your code by taking class of element in every loop and adding it in the end.
Was the class on the or the after it had converted it?
It's good to know people are using this add-on :)
As simple as that:
$(pluginObj).each(
function (index) {
var svgObj = $(this),
svgPath = svgObj.attr('src');
var thisClass = svgObj.attr('class'); //HERE
debug('Path ' + index, svgPath);
$.get(
svgPath,
function (data) {
var svgData = data.childNodes,
svgLength = svgData.length,
svgOutput,
svgOutputClean;
/*
Node Types
---
1 Element
2 Attribute
3 Text
4 CDATA Section
5 Entity Reference
6 Entity
7 Processing Instruction
8 Comment
9 Document
10 Document Type
11 Document Fragment
12 Notation
*/
for (var node = 0; node < svgLength; node++) {
if (svgData[node].nodeType === 1) {
svgOutput = svgData[node];
$.each(
pluginSettings.cleanUp,
function (i, item) {
$(svgOutput).removeAttr(item);
}
);
}
}
$(svgOutput).addClass(thisClass); //HERE
svgObj.after(svgOutput);
svgObj.remove();
/*
onComplete Callback
*/
if (index + 1 === pluginObjLength) {
pluginSettings.onComplete.call(this);
}
}
);
}
);
Maybe there is a better solution, but it works
PS. I was wondering why people are not using such tools, but eventually I figured out that this process should be done by gulp
Gotcha! Yeah it's on my list to be able to add classes, ID's and data attributes back on to the SVG after it's been converted.
Oh really? Didn't know you could do it with Gulp - Point me in the right direction for that?
I have found this
https://github.com/ashaffer/gulp-inline
It doesn't look popular, but you need to agree, that we shouldn't convert svg's every time on clients side. Also pasting SVG inline is hard to maintain, so gulp seems to be perfect solution if you need fe. a lot of animated svgs
Also
Yeah, that would work well. The reason we built this add-on though was for user generated content. We had an issue where our clients were uploading SVG's, but they were the wrong colour etc... So i works well.
The Gulp way would only work if the SVG's are already in the template right?
Agree, maintaining inline SVG's is difficult. We wrote a blog post to go with this add-on and some other people suggested some other ways:
http://madebyshape.co.uk/blog/convert-svgs-from-image-to-code-jquery
https://css-tricks.com/svg-use-external-source/
Well, I was thinking only about svgs added in developing process, so yes, gulp will do this only on building (or you can have it on your node.js server).
If you want to convert user-uploaded content - thats good solution, but I think more performance way would be doing this on server-side.
Anyway good job
Thanks! :) I'll add the class thing in in the next few days if you wanted to pull it down and use that one
This has now been added / fixed in the latest release. Please note the plugin name has changed from shapeSVGConvert to svgConvert and the options have changed if your upgrading.