w0rm / gulp-svgstore

Combine svg files into one with symbol elements

Home Page:https://www.npmjs.com/package/gulp-svgstore

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Need to add new attribute to generated Symbol

kamlekar opened this issue · comments

Using this plugin, I am able to generated svg's inside <symbol> element. I have a requirement where I need to add a attribute to these generated <symbol> elements.

I tried the following, which isn't working:

        .pipe(svgstore())
        .pipe(through2.obj(function (file, encoding, cb) {
            var $ = file.cheerio;
            $('svg > symbol').each(function(index, element){
                element.attribs['preserveAspectRatio'] = 'xMinYMid';
            })
        }))
        // Store the generated svg sprite in "site/assets/images/" folder
        .pipe(gulp.dest('site/assets/images/'));

In the above excerpt code, I am trying to add preserveAspectRatio attribute to generated symbol elements. (this isn't working)

Please help.

@kamlekar you shouldn't use file.cheerio for this, it won't update the original file. To modify the file, pipe it through gulp-cheerio

@w0rm Thanks. That worked!!

Here is the code if someone is interested:

        .pipe(svgstore())
        .pipe(cheerio(function($, file){
            $('svg > symbol').each(function(index, element){
                $(element).attr('preserveAspectRatio', 'xMinYMid');
            })
        }))
        // Store the generated svg sprite in "site/assets/images/" folder
        .pipe(gulp.dest('site/assets/images/'));

@kamlekar cheerio should work like jquery, so you don't need to iterate, this should be enough:
$('symbol').attr('preserveAspectRatio', 'xMinYMid');

ok thanks :)