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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
/* <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(); |