Photoshop – devfrontend.info

Pompé intégralement sur : Exporter ses icônes en SVG depuis Photoshop

Voici la procédure pour exporter très rapidement l’ensemble des icônes d’un PSD au format vectoriel SVG.

Prérequis pour pouvoir exporter vos icônes au fomat SVG :

Installer le script : save-ps-to-svg.jsx dans le dossier C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts
Démarrer Photoshop et avoir Illustrator installé sur sa machine.

Les screenshots ci-dessous sont fait sur Photoshop CS6, mais le script d’export des icônes au format SVG devrait fonctionner également sur CS5.
Source : http://hackingui.com/design/export-photoshop-layer-to-svg/

Procédure d’export svg :

Renommer les calques à exporter en terminant par .svg
Sélectionner la forme, appuyer sur A (outil de sélection de tracé) et cliquer sur fusionner les composants de forme.
Lancer le script via Fichier / Script, Illustrator va se lancer automatiquement et exporter un à un les calques .svg à l’endroit où vous avez sauvegardé votre PSD.

Le script :

/*
 <javascriptresource>
 <name>Save as SVG</name>
 <about>Name a layer or layerset with .svg to convert it.</about>
 </javascriptresource>
 */

var SvgWiz = SvgWiz || {
    settings : {
        scriptName : 'svgexport',
        doc : app.activeDocument,
        projectPath : app.activeDocument.path,
        layers : app.activeDocument.layers,
        svgFile : null,
        svgColor : null,
        exportOpts : new ExportOptionsIllustrator(),
        currentLayer : null,
        svgLayers : []
    },
    getSettings : function(){
        return this.settings;
    },
    setSetting : function(key, val){
        return this.settings[key] = val;
    },
    
    getLayerFillColor : function(){
        var ref = new ActionReference();
            ref.putEnumerated( stringIDToTypeID( "contentLayer" ), charIDToTypeID( "Ordn" ), charIDToTypeID( "Trgt" ));
        var ref1= executeActionGet( ref );
        var list =  ref1.getList( charIDToTypeID( "Adjs" ) ) ;
        var solidColorLayer = list.getObjectValue(0);        
        var color = solidColorLayer.getObjectValue(charIDToTypeID('Clr ')); 
        var fillcolor = new SolidColor;
           fillcolor.rgb.red = color.getDouble(charIDToTypeID('Rd  '));
           fillcolor.rgb.green = color.getDouble(charIDToTypeID('Grn '));
           fillcolor.rgb.blue = color.getDouble(charIDToTypeID('Bl  '));

        this.setSetting('svgColor', fillcolor.rgb);
    },

    exportToIll : function(){
        var s = this.getSettings(),
            opts = s.exportOpts;

        // create svgFile
        var svgPath = s.projectPath + '/' + s.currentLayer.name + '.ai';
        this.setSetting('svgFile', new File(svgPath));

        opts.path = IllustratorPathType.NAMEDPATH;
        opts.pathName = s.currentLayer.name; // ** Adobe bug, this does not work, regardless of name it uses the doc.activeLayer
        s.doc.exportDocument(s.svgFile, ExportType.ILLUSTRATORPATHS, opts);
    },
    
    openWithBridgeTalk : function(){
        var s = this.getSettings();
        // start bridgeTalk to communicate with illustrator
        var bt = new BridgeTalk();

        bt.target = "illustrator";

        bt.body  = "var dtOpts = new OpenOptions();"; // create new object for opening options
        bt.body += "dtOpts.createArtboardWithArtworkBoundingBox = false;"; // pass parameter to object
        bt.body += "dtOpts.convertCropAreaToArboard = false;"; // pass parameter to object
        bt.body += "dtOpts.preserveLegacyArtboard = false;"; // pass parameter to object
        bt.body += "app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;"; // turn off dialogs so there are no interruptions in the script
        bt.body += "app.open(" + s.svgFile.toSource() + ", DocumentColorSpace.RGB, dtOpts);"; // open exported file from PS
        bt.body += "var mySelection = app.activeDocument.selectObjectsOnActiveArtboard();"; // need to select the path object
        bt.body += "var currentPath = app.activeDocument.selection[0].pathItems[0];"; // get current pathItem (the shape)
        bt.body += "var col = new RGBColor(); col.red = "+ s.svgColor.red +"; col.green = "+ s.svgColor.green +"; col.blue = "+ s.svgColor.blue+ ";"; // set new rgb color using values from PS
        bt.body += "currentPath.fillColor = col;";
        bt.body += "app.activeDocument.fitArtboardToSelectedArt(app.activeDocument.artboards.getActiveArtboardIndex());"; // object -> artboards -> fit to artwork bounds
        bt.body += "var destFolder = "+ s.projectPath.toSource() +";";
        bt.body += "var targetFile = new File( destFolder + '/' + "+ s.currentLayer.name.toSource() +");"; // name file from PS layer name
        bt.body += "app.activeDocument.exportFile(targetFile, ExportType.SVG);"; // save as svg
        bt.body += "app.activeDocument.close();"; // close file

        bt.send(); // submits BT
    },

    getAllSVGLayers : function(node){
        var s = this.getSettings();

        for(var i=0; i < node.layers.length; i++){
            var layer = node.layers[i];
            if (layer.typename == 'LayerSet'){
                // its a group, send it back to be looped through
                SvgWiz.getAllSVGLayers(layer);
            } else {
                // its a single layer, check if named .svg and a solid fill layer
                if (layer.name.indexOf('.svg') !== -1 && layer.kind == 'LayerKind.SOLIDFILL') {
                    s.svgLayers.push(layer);
                }
            }
        }
    },

    init : function(){
        var s = this.getSettings();

        this.getAllSVGLayers(s.doc);
        var svgLayers = s.svgLayers;
        if (svgLayers.length < 1) {
            alert('You need to add some layers to convert. Make sure they are named with .svg');
            return;
        }
        for(var i=0; i < svgLayers.length; i++) {
            var layer = svgLayers[i];
            SvgWiz.setSetting('currentLayer', layer);
            s.doc.activeLayer = s.currentLayer; // make this the activelayer in the doc because of bug that won't let you export ill. paths by name
            this.getLayerFillColor();
            this.exportToIll();
            this.openWithBridgeTalk();
        }
    }
};

SvgWiz.init();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<about>Name a layer or layerset with .svg to convert it.</about>

</javascriptresource>

var SvgWiz = SvgWiz || {

settings : {

scriptName : 'svgexport',

doc : app.activeDocument,

projectPath : app.activeDocument.path,

layers : app.activeDocument.layers,

svgFile : null,

svgColor : null,

exportOpts : new ExportOptionsIllustrator(),

currentLayer : null,

svgLayers : []

getSettings : function(){

return this.settings;

setSetting : function(key, val){

return this.settings[key] = val;

getLayerFillColor : function(){

var ref = new ActionReference();

ref.putEnumerated( stringIDToTypeID( "contentLayer" ), charIDToTypeID( "Ordn" ), charIDToTypeID( "Trgt" ));

var ref1= executeActionGet( ref );

var list = ref1.getList( charIDToTypeID( "Adjs" ) ) ;

var solidColorLayer = list.getObjectValue(0);

var color = solidColorLayer.getObjectValue(charIDToTypeID('Clr '));

var fillcolor = new SolidColor;

fillcolor.rgb.red = color.getDouble(charIDToTypeID('Rd '));

fillcolor.rgb.green = color.getDouble(charIDToTypeID('Grn '));

fillcolor.rgb.blue = color.getDouble(charIDToTypeID('Bl '));

this.setSetting('svgColor', fillcolor.rgb);

exportToIll : function(){

var s = this.getSettings(),

opts = s.exportOpts;

// create svgFile

var svgPath = s.projectPath + '/' + s.currentLayer.name + '.ai';

this.setSetting('svgFile', new File(svgPath));

opts.path = IllustratorPathType.NAMEDPATH;

opts.pathName = s.currentLayer.name; // ** Adobe bug, this does not work, regardless of name it uses the doc.activeLayer

s.doc.exportDocument(s.svgFile, ExportType.ILLUSTRATORPATHS, opts);

openWithBridgeTalk : function(){

var s = this.getSettings();

// start bridgeTalk to communicate with illustrator

var bt = new BridgeTalk();

bt.target = "illustrator";

bt.body = "var dtOpts = new OpenOptions();"; // create new object for opening options

bt.body += "dtOpts.createArtboardWithArtworkBoundingBox = false;"; // pass parameter to object

bt.body += "dtOpts.convertCropAreaToArboard = false;"; // pass parameter to object

bt.body += "dtOpts.preserveLegacyArtboard = false;"; // pass parameter to object

bt.body += "app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;"; // turn off dialogs so there are no interruptions in the script

bt.body += "app.open(" + s.svgFile.toSource() + ", DocumentColorSpace.RGB, dtOpts);"; // open exported file from PS

bt.body += "var mySelection = app.activeDocument.selectObjectsOnActiveArtboard();"; // need to select the path object

bt.body += "var currentPath = app.activeDocument.selection[0].pathItems[0];"; // get current pathItem (the shape)

bt.body += "var col = new RGBColor(); col.red = "+ s.svgColor.red +"; col.green = "+ s.svgColor.green +"; col.blue = "+ s.svgColor.blue+ ";"; // set new rgb color using values from PS

bt.body += "currentPath.fillColor = col;";

bt.body += "app.activeDocument.fitArtboardToSelectedArt(app.activeDocument.artboards.getActiveArtboardIndex());"; // object -> artboards -> fit to artwork bounds

bt.body += "var destFolder = "+ s.projectPath.toSource() +";";

bt.body += "var targetFile = new File( destFolder + '/' + "+ s.currentLayer.name.toSource() +");"; // name file from PS layer name

bt.body += "app.activeDocument.exportFile(targetFile, ExportType.SVG);"; // save as svg

bt.body += "app.activeDocument.close();"; // close file

bt.send(); // submits BT

getAllSVGLayers : function(node){

var s = this.getSettings();

for(var i=0; i < node.layers.length; i++){

var layer = node.layers[i];

if (layer.typename == 'LayerSet'){

// its a group, send it back to be looped through

SvgWiz.getAllSVGLayers(layer);

} else {

// its a single layer, check if named .svg and a solid fill layer

if (layer.name.indexOf('.svg') !== -1 && layer.kind == 'LayerKind.SOLIDFILL') {

s.svgLayers.push(layer);

}

init : function(){

var s = this.getSettings();

this.getAllSVGLayers(s.doc);

var svgLayers = s.svgLayers;

if (svgLayers.length < 1) {

alert('You need to add some layers to convert. Make sure they are named with .svg');

return;

}

for(var i=0; i < svgLayers.length; i++) {

var layer = svgLayers[i];

SvgWiz.setSetting('currentLayer', layer);

s.doc.activeLayer = s.currentLayer; // make this the activelayer in the doc because of bug that won't let you export ill. paths by name

this.getLayerFillColor();

this.exportToIll();

this.openWithBridgeTalk();

}

};

SvgWiz.init();

Articles récents

Catégories

Archives

Méta

Catégorie : Photoshop

[Photoshop] Exporter ses icônes en SVG

Prérequis pour pouvoir exporter vos icônes au fomat SVG :

Procédure d’export svg :

Le script :