How to export selection as svg using extendscript?

[psar12345]

Hi,

I need to export the selection as an SVG using ExtendScript, just like the manual 'Export Selection' functionality.

var svgexportOptions = new ExportOptionsSVG();
svgexportOptions.embedRasterImages = true;
svgexportOptions.coordinatePrecision = 3;

It is working fine, but there is some empty space at the top compared to the manual 'Export Selection'.

[jduncan]

If you are using the `app.activeDocument.exportFile()` method, it will export at the current document size. You could try fitting the current artboard to the selected artwork and then exporting (see below). FYI, this will get weird with multiple artboards, so you would need to account for that edge case (and probably a few more).

(function () {
    // get the active document
    try {
        var doc = app.activeDocument;
    } catch (e) {
        alert("No active document.\n" + e);
        return;
    }

    var fp = Folder.desktop + "/export.svg";
    var ab = doc.artboards.getActiveArtboardIndex();
    doc.fitArtboardToSelectedArt(ab);

    var exportOptions = new ExportOptionsSVG();
    exportOptions.embedRasterImages = true;

    var type = ExportType.SVG;
    var fileSpec = new File(fp);

    doc.exportFile(fileSpec, type, exportOptions);
})();

[psar12345]

Hi @jduncan 

Thanks for your help. It is working fine but some styles is missing after export svg using extendscript like mix-blend-mode etc.,

I try this 
svgexportOptions.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS;

But no luck. Please help

[jduncan]

There are a handful of export options that would need to match you setting from the Export Selection dialog. Can you share a screenshot of your Asset Export dialog and also share a PDF of the base file you are exporting from?

[psar12345]

Hi @jduncan,

what is the Asset Export dialog? - I selected the vector group item in the artwork and ran the script to export SVG. Also, I attached the PDF of the base file, the manual, and the automatically downloaded SVG file.

[jduncan]

The dialog that pops up when you manually do File > Export Selection... (see attached).

[psar12345]

Hi @jduncan,

I attached here the dialog screenshot and correct pdf file.

[psar12345]

Hi @jduncan,

I am not changing any default settings while exporting to SVG.

[jduncan]

So, after digging around a bit, I can get the blend mode to show up in the exported SVG xml by using setting the export option `optimizeForSVGViewer` to `true`. Unfortunately, the attribute comes as `adobe-blending-mode` instead of `mix-blend-mode` so it doesn't actually work. Also, the exported SVG xml isn't valid either. In line 3 (see below), Adobe include a few "&" characters which are invalid.

My best guess, is that when using File > Export Selection, Adobe uses a more moden SVG export method than the one that is used when calling the `exportFile` method from ExtendScript. If you inspect the two types of exported xml code you'll see that they are completely different.

Unfortunately, this may be a dead end for you...

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 9.03 Build 55982)  -->
<svg version="1.1" id="Layer_1" xmlns:x="ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" viewBox="0 0 157.84 184.76" style="enable-background:new 0 0 157.84 184.76;" xml:space="preserve">
<g style="enable-background:new    ;">
	<g id="Layer_1-2">
		
			<circle style="fill:#ED1C24;stroke:#231F20;stroke-miterlimit:10;adobe-blending-mode:difference;enable-background:new    ;" cx="56.7" cy="56.7" r="56.2"/>
		
			<circle style="fill:#FFF200;stroke:#231F20;stroke-miterlimit:10;adobe-blending-mode:difference;enable-background:new    ;" cx="86.4" cy="113.32" r="70.94"/>
	</g>
</g>
</svg>

[psar12345]

Hi @jduncan,

Ok I understand. Thanks for your support.

[psar12345]

Hi @jduncan,

below the mentioned line, the ab value is 0. In this scenario, it shows error.

var ab = doc.artboards.getActiveArtboardIndex();
    doc.fitArtboardToSelectedArt(ab);

 Please help.

[jduncan]

Yes, index '0' would be the first artboard listed in your Artboard Palette. This shouldn't cause any errors. See the included screen recording... If you are getting an error, can you share the file you are working with (needs to be a PDF to share here)?

[psar12345]

Hi @jduncan,

I attached the pdf file here. Error is "an Illustrator error occurred: 1346458189 ('PARM')".

[jduncan]

Hmm, that file seems to run fine for me with no errors. Have you edited the script any or does you script do other things then what we discussed above? I know that error can happen sometimes when switching between files and closing files but that is not technically happening in this script so I woudn't expect you to get that error... Let me know?

[psar12345]

Hi @jduncan,

I export to svg based on the selected items in the artboard, not the entire artboard.

(function () {	
	try {
		var selectedItems = app.activeDocument.selection;
		if (selectedItems.length) {
			for(var selIndex = 0;selIndex < selectedItems.length;selIndex++) {
				var selItem = selectedItems[selIndex];
				
				var doc = app.activeDocument;
		
				var docColorSpace = (doc.documentColorSpace === DocumentColorSpace.RGB) ? DocumentColorSpace.RGB : DocumentColorSpace.CMYK;
				
				var bounds = selItem.geometricBounds;
				
				var left = bounds[0];
				var top = bounds[1];
				var right = bounds[2];
				var bottom = bounds[3];

				var width = Math.abs(right - left);
				var height = Math.abs(top - bottom);
				
				// Define maximum safe dimension (in points)
				var MAX_DIMENSION = 16329;
				
				width = Math.abs(Math.max(1, Math.min(MAX_DIMENSION, Math.round(width))));
				height = Math.abs(Math.max(1, Math.min(MAX_DIMENSION, Math.round(height))));
	
				var temDoc = app.documents.add(docColorSpace, width, height);
        
				var nItem = selItem.duplicate(temDoc.layers[0], ElementPlacement.PLACEATEND);
		
				var ab = doc.artboards.getActiveArtboardIndex();				
				doc.fitArtboardToSelectedArt(ab);
				
				var fp = Folder.desktop + "/export.svg";
		
				var fileSpec = File(fp);
    
				var exportOptions = new ExportOptionsSVG();
				exportOptions.embedRasterImages = true;
				exportOptions.coordinatePrecision = 3;
				exportOptions.documentEncoding = SVGDocumentEncoding.UTF8;
				exportOptions.DTD = SVGDTDVersion.SVG1_0;
				exportOptions.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS;
				exportOptions.optimizeForSVGViewer = true;
				
				var type = ExportType.SVG;
    
				temDoc.exportFile(fileSpec, type, exportOptions);
    
				temDoc.close(SaveOptions.DONOTSAVECHANGES);
				
			}			
		}
		
	} catch(e) {
		alert(e.message+"("+e.line+")");
	}
})();

[jduncan]

Yes, this code is different from what was previously worked on. Anytime you adjust the code, please make sure to update it here so everyone can see what code you are actually running and can better diagnose any issues you are having.

So, in your updated code, you are:

1. looping over every selected item in the current document (we'll call this sourceDoc)
2. getting the geometric bounds of the selected item
3. creating a new temp document based on the dimensions of the current loop index selected item of sourceDoc
4. duplicating the current loop index selected item to the new temp doc
5. getting the selected artboard of the original sourceDoc (not the new temp doc)
6. fitting the selected artboard of the original sourceDoc to the entire selection (not urrent loop index selected item)
7. export and close the temp doc

So, do you want to either...

• export the entire selection as an SVG (giving you one SVG file) like your initial post?
• or do you want to export every item of the selection independently as SVG files?

Your current code seems like you want to export every selected item individually but then you are adjusting the artboard of the original source doc. You also calculate the size for the temp doc so you wouldn't need to worry about the fitArtboardToSelection method.

I am just confused about what you want to happen. Can you supply a list (like mine above) of the steps you need to code to take along with the result you expect (1 file, multiple files, etc.)?

[psar12345]

Hi @jduncan 

Yes, i need to export every item of the selection independently as SVG files.

[jduncan]

@psar12345, okay, that is doable but a bit more complex...

Do you want to export every single page item individually (expanding groups and clipping mask)? So, if you have three circles grouped, do you want to export them individually or should a group be exported whole (all three circles in one file)?

Do you plan to export a lot of large items? The reason I ask, it may be better to create artboard for every selected item in one file and then just use Export As with the artboard options to save the SVGs...

Also, why are you wanting to do this through ExtendScript, if you don't mind me asking? This is exactly what the Asset Export panel is for.

[psar12345]

Hi @jduncan,

I need to export svg file for selected compoundpathitem and groupitem only.

(function () {	
	try {
		var selectedItems = app.activeDocument.selection;
		if (selectedItems.length) {
			for(var selIndex = 0;selIndex < selectedItems.length;selIndex++) {
				var selItem = selectedItems[selIndex];		
				if (selItem.typename === 'CompoundPathItem' || selItem.typename === 'GroupItem') {
					
				}
			}
		}
	} catch(e) {
		alert(e.message+"("+e.line+")");
	}
})();

why are you wanting to do this through ExtendScript - I am using Adobe CEP(nodejs and extendscript).