Drawing svg code javascript (no import)

[laurentc39824241]

Hi, I'm writing a script to create a simple document with text and a rather simple vector logo placed on it.

For the logo I don't want to choose the same file in a dialog every time I run the script so I wondered if there was a way to create an object directly using the svg code from the logo file.

Therefore, the logo in my document would not be a linked file but vector indesign items.

[Robert Kyle]

Doon't know about SVG. I've always stored logos & such in a library, then use a script to place the library asset. This means non-scripters can tweak the asset as long as they save it under the same name.

[Mike Bro]

Hello,

Re: " I don't want to choose the same file in a dialog every time I run the script"

You can do what robert said and store your logo in a specific location then have the script place that file without using a dialog to select.

Example:

doc = app.documents[0]; 

var myFolder = doc.filePath;

myLogo = app.activeDocument.place(File(myFolder.fsName + "/" + "Logo.eps"));

Regards,

Mike

[laurentc39824241]

Thanks for your answers.

The thing is, if I want to share the script in my team, I will need to share the logo as well, and it will need to have the exact same file path. 

It would be way more simple if I could draw it directly in the script.

[rob day]

There isn‘t an option for scripting svg code, but you can script polygons and their paths. It should be possible store the logo’s pathPoints in arrays and construct new polygons

https://www.indesignjs.de/extendscriptAPI/indesign-latest/#PathPoint.html#d1e267038

https://www.indesignjs.de/extendscriptAPI/indesign-latest/#Path.html#d1e266307

https://www.indesignjs.de/extendscriptAPI/indesign-latest/#Polygon.html

[laurentc39824241]

Unfortunately even if the logo is not complicated, it has some curves that make me think it would be tedious to do that way. Unless there is a mean to get the pathpoints of an already existing graphic (that I could copy-paste for example).

[rob day · Accepted solution]

Unless there is a mean to get the pathpoints of an already existing graphic (that I could copy-paste for example).

There is.

This code would return the entirePath property of the selected path:

var p=app.activeDocument.selection[0].paths[0].entirePath;  
$.writeln("Properties:" + p.toSource())  
 
//returns [[[0.44771525333333, 1], [1, 1], [1.55228474666667, 1]], [[2, 0.77614237333333], [2, 0.5], [2, 0.22385762666667]], [[1.55228474666667, 0], [1, 0], [0.44771525333333, 0]], [[0, 0.22385762666667], [0, 0.5], [0, 0.77614237333333]]]

Then to create the same path in a new script it would something like this function (rulers set to inches):

//gets a selection’s path
//var p=app.activeDocument.selection[0].paths[0].entirePath;  
//$.writeln("Properties:" + p.toSource())  

    

//the entire path property
var pathArray = [[[0.44771525333333, 1], [1, 1], [1.55228474666667, 1]], [[2, 0.77614237333333], [2, 0.5], [2, 0.22385762666667]], [[1.55228474666667, 0], [1, 0], [0.44771525333333, 0]], [[0, 0.22385762666667], [0, 0.5], [0, 0.77614237333333]]]
//the target page
var pg = app.activeDocument.pages[0]

var poly = makePath(pg, pathArray);
poly.fillColor = "Black"

/**
* Make a path with the provide entire path array 
* @Param the target page 
* @Param the entire path array 
* @Return the polygon
* 
*/
function makePath(pg, ep){
    //add a new polygon to page
    var thePath= pg.polygons.add();
    //set the entire path
    thePath.paths[0].entirePath = ep;
    return thePath
}

[rob day]

And here is a more complex example where I’m drawing a capital A, which has 2 paths, which I got as arrays using the toSource method:

//Use this to get a selection’s path
//var p=app.activeDocument.selection[0].paths[0].entirePath;  
//$.writeln("Properties:" + p.toSource())  

    

//the entirePath array
var p1 = [[[0.65999997241629, 0.7055555317137], [0.65999997241629, 0.68666664097044], [0.65999997241629, 0.66777775684992]], [[0.65888888885578, 0.64333330922657], [0.65666666875283, 0.62555552853478], [0.65666666875283, 0.62555552853478]], [[0.62111109412379, 0.61555553807153], [0.62111109412379, 0.61555553807153], [0.56222223490477, 0.4088888698154]], [[0.49777774595552, 0.20666662851969], [0.42666664967934, 0], [0.42666664967934, 0]], [[0.2344444518288, 0], [0.2344444518288, 0], [0.16222221901019, 0.20666662851969]], [[0.09777777642012, 0.4088888698154], [0.03888888739877, 0.61555553807153], [0.03888888739877, 0.61555553807153]], [[0.00333333263795, 0.62555552853478], [0.00333333263795, 0.62555552853478], [0.00111111087932, 0.64333330922657]], [[0, 0.66777775684992], [0, 0.68666664097044], [0, 0.7055555317137]], [[0.00111111087932, 0.72999997437], [0.00333333263795, 0.74888886345757], [0.00333333263795, 0.74888886345757]], [[0.23888889203469, 0.74888886345757], [0.23888889203469, 0.74888886345757], [0.24111111213764, 0.72999997437]], [[0.24222222218911, 0.7055555317137], [0.24222222218911, 0.68666664097044], [0.24222222218911, 0.66777775684992]], [[0.24111111213764, 0.64333330922657], [0.23888889203469, 0.62555552853478], [0.23888889203469, 0.62555552853478]], [0.1888888867365, 0.61555553807153], [0.21333333435986, 0.53222220473819], [0.43777775019407, 0.53222220473819], [0.46222222430838, 0.61555553807153], [[0.41222221901019, 0.62555552853478], [0.41222221901019, 0.62555552853478], [0.40999999890725, 0.64333330922657]], [[0.40888888885578, 0.66777775684992], [0.40888888885578, 0.68666664097044], [0.40888888885578, 0.7055555317137]], [[0.40999999890725, 0.72999997437], [0.41222221901019, 0.74888886345757], [0.41222221901019, 0.74888886345757]], [[0.65666666875283, 0.74888886345757], [0.65666666875283, 0.74888886345757], [0.65888888885578, 0.72999997437]]];


var p2 = [[0.40333331210746, 0.41111108991835], [0.24777777244647, 0.41111108991835], [[0.30555554810497, 0.21444442537096], [0.30555554810497, 0.21444442537096], [0.31222220841381, 0.19000000423855]], [[0.31888886872265, 0.16111108991835], [0.32000000526508, 0.14222219255235], [0.32000000526508, 0.14222219255235]], [[0.33111110577981, 0.14222219255235], [0.33111110577981, 0.14222219255235], [0.33222221583128, 0.16111108991835]], [[0.33888887614012, 0.19000000423855], [0.34555553644896, 0.21444442537096], [0.34555553644896, 0.21444442537096]]]

//the target page
var pg = app.activeDocument.pages[0]
//path 1
var poly = makePath(pg, p1);
poly.fillColor = "Black"
//path 2
var poly2 = makePath(pg, p2);
poly2.fillColor = "Paper"

/**
* Draw a path with the provided entire path array 
*  the target page 
*  the entire path array 
*  the polygon
* 
*/
function makePath(pg, ep){
    //add a new polygon to page
    var thePath= pg.polygons.add();
    //set the entire path
    thePath.paths[0].entirePath = ep;
    return thePath
}

[laurentc39824241]

Thanks, I'll try that !

[Jens Trost]

rob's way should be the way to go.

[Jens Trost]

But just to make it clear – you need a lot more scripting to make that work with complex logos and such... it begins with the color of the path.

rob's snippet is the starting point, but it only gets you the path points, nothing else.

[laurentc39824241]

Ok, it works great, that's what I was looking for.

I've put the different paths into an array, and build the logo in a for loop with some conditions and pathfinder stuff.

Thank you very much !

[Jens Trost]

Hi @laurentc39824241,
you could save your logo as .svg, copy the svg-code into a variable in your script and then create the logo on the fly as svg file again.

[laurentc39824241]

Nice ! That's exactly what I want to do ! Do you have any hint on how to do that ?

[BarlaeDC]

Hi,

Should be able to use this, just change the var content line to be the SVG code, and the filename to FILE.svg.

https://community.adobe.com/t5/after-effects/create-a-txt-file-in-extendscript/td-p/9645024?page=1

Malcolm

[Jens Trost]

I thought it's pretty straight forward:
– save your logo as svg
– open up svg file in a text editor
– copy code
– paste code in your script, storing it in a variable e.g. – BE AWARE – you may need to escape quotes and such.

var logo = '<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
...
...
...'

– create a file via your script and write that code into the svg file, e.g. 

var f = File("/store/your/logo/here.svg").open("w");
    f.encoding = "UTF-8";
    f.write(logo);
    f.close();

– relink your logo to that file, e.g.

app.activeDocument.links.[getyourlogohere].relink("/store/your/logo/here.svg");

 
– do whatever you do in your script.

[Robert Kyle]

Looks like you've got the SVG solution you were looking for, but I just want to point out that you can store a library on a server and give everyone on your team access to it. Yet it's still only one thing to change if/when change becomes necessary. In fact, we keep our executable script code on a server for that same reason; the client PCs run them via shortcuts.

[laurentc39824241]

For this particular script, it won't change (or if it does everything else will so it will become useless anyway).

That's an other topic but I've tried several times to put our scripts on a server and run them via shortcuts, but the shortcuts get replaced by the actual files at each CC's update. Got tired of replacing them with shortcuts every time...

I would love to have a simple mean to share scripts, documents presets, default color settings and other stuff in the team...

[Robert Kyle]

Not sure what's happening there. We have absolutely no JavaScript code on desktop PCs. Or libraries or templates. We have a shortcut in the startup folder that initiates our scripting system at startup, including a  ScriptUI panel with buttons and dropdowns linked to other scripts, all on the server.

If it's really not possible to use a shortcut in CC, I think I'd try using a stub scriptthat simply executes doScript() on script files on the server.