Drawing svg code javascript (no import)

Community Beginner ,
Jan 05, 2021

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by rob day | Adobe Community Professional

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]]]

 

Screen Shot 7.png

 

 

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
}

 

TOPICS
How to, Scripting

Views

116

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Drawing svg code javascript (no import)

Community Beginner ,
Jan 05, 2021

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by rob day | Adobe Community Professional

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]]]

 

Screen Shot 7.png

 

 

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
}

 

TOPICS
How to, Scripting

Views

117

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 05, 2021 0
Contributor ,
Jan 05, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2021 1
Enthusiast ,
Jan 05, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2021 1
Community Beginner ,
Jan 06, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Adobe Community Professional ,
Jan 06, 2021

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 1
Community Beginner ,
Jan 06, 2021

Copy link to clipboard

Copied

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Adobe Community Professional ,
Jan 06, 2021

Copy link to clipboard

Copied

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]]]

 

Screen Shot 7.png

 

 

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
}

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 1
Adobe Community Professional ,
Jan 06, 2021

Copy link to clipboard

Copied

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:

 

Screen Shot 9.png

 

 

 


//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
}

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 2
Community Beginner ,
Jan 06, 2021

Copy link to clipboard

Copied

Thanks, I'll try that !

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Contributor ,
Jan 06, 2021

Copy link to clipboard

Copied

rob's way should be the way to go.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Contributor ,
Jan 06, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 1
Community Beginner ,
Jan 07, 2021

Copy link to clipboard

Copied

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 !

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 07, 2021 0
Contributor ,
Jan 06, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Community Beginner ,
Jan 06, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Adobe Community Professional ,
Jan 06, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Contributor ,
Jan 06, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Contributor ,
Jan 06, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Community Beginner ,
Jan 06, 2021

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0
Contributor ,
Jan 06, 2021

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2021 0