SVG - Gradients / Farbverlauf


Angenommen wir haben eine Sammlung von verschiedenen SVGs die an diversen Stellen als Icon missbraucht werden. Des Weiteren nehmen wir noch an es handle sich um eine Kollektion von über 500 Icons. Nun sollen alle SVGs einen schönen Farbverlauf bekommen ... allerdings hilft uns CSS dabei nicht. Da hilft nur den Farbverlauf in die SVGs zu schreiben ... aber wer setzt sich schon freiwillig hin und fügt den Verlauf ein?

 

Das dachte ich mir auch. Und so hatte ich mit ein paar Zeilen Code und mit Hilfe von Gulp, schnell und einfach ein Skript parat das diese Arbeit für mich übernimmt:

 

var replace = require("gulp-replace");
gulp.task('svg', function () {
    var regExGrad = /(<path.*path>)/i; // greift nur beim ersten Treffer, damit der Verlauf nur einmal hinzugefügt wird
    var replaceGrad = '<defs>\n    <linearGradient id="lgrad" x1="0%" y1="100%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">\n        <stop offset="0%" style="stop-color:rgb(93,182,127);stop-opacity:1"/>\n        <stop offset="100%" style="stop-color:rgb(0,157,222);stop-opacity:1"/>\n    </linearGradient>\n</defs>';
    var regExFill = /fill="(.*)"/gi; // muss in jedem <path> angepasst werden
    var replaceFill = 'fill="url(#lgrad)"';
    gulp.src(['SVG/*.svg'])
        .pipe(replace(regExGrad, replaceGrad + "$1"))
        .pipe(replace(regExFill, replaceFill))
        .pipe(gulp.dest('SVG/Gradient/'));
});

Kategorien

  Devblog

Hat dir der Artikel gefallen?

Werkraum News:

Such­ser­ver für TYPO3 im Ver­gleich

Folgendes Problem: Der Kunde möchte eine Suche auf der Firmenwebseite haben und als TYPO3-Entwickler steht man vor der Frage, welche Suche man dem Kunden empfiehlt. Für alle,...

TYPO3camp München Location

TYPO3­camp in Mün­chen

Wie jedes Jahr fand vom 14.09. bis 16.09.2018 das TYPO3camp in München statt, und auch dieses Mal nahmen einige werkraum-Mitarbeiter daran teil. Was die TYPO3-Community...