: Why am I getting dotted grey edges on my batch exported images? I have created a script which batch exports an ai file into an SVG file and multiple sizes of JPG and PNG files. The script

Posted in: #AdobeIllustrator #AntiAliasing #Export #IllustratorScripting #VisualArtifacts

I have created a script which batch exports an ai file into an SVG file and multiple sizes of JPG and PNG files. The script creates three directories in the parent directory of the directory the ai file is in, titled SVG Files, PNG Files, and JPG Files. Within each of those directories, it creates another directory with the file name, and within each of those it places the appropriate images, named based off their sizes.

The result is a structure similar to this:

Illustrator -> Star.ai
SVG Files -> Star -> Star.svg
PNG Files -> Star -> Star-16px.png, Star-32px.png ... etc
JPG Files -> Star -> Star-16px.jpg, Star-32px.jpg ... etc

I am having issues with the exported images sometimes showing up with odd dotted grey borders. To demonstrate, I created a 500px by 500px artboard using RGB, and placed nothing more than a red star with a white stroke. I then ran my script, which you will find below:
#target Illustrator

/**
* This script will export an Illustrator file into multiple sizes of multiple file types.
* @author Mitch Talmadge
*/

if (app.documents.length > 0) {
main();
}
else Window.alert("Cancelled export.");

function main() {
var document = app.activeDocument;
var afile = document.fullName;
var filename = afile.name.split('.')[0];

var svgFolder = new Folder(afile.parent.parent.fsName + "/SVG Files/" + filename);
if(!svgFolder.exists) svgFolder.create();

var pngFolder = new Folder(afile.parent.parent.fsName + "/PNG Files/" + filename);
if(!pngFolder.exists) pngFolder.create();

var jpgFolder = new Folder(afile.parent.parent.fsName + "/JPG Files/" + filename);
if(!jpgFolder.exists) jpgFolder.create();

var sizes = [1024,512,300,256,150,100,64,50,32,16];

var size, file;

Window.alert("Press OK to begin exporting.");

if(svgFolder != null)
{
var options = new ExportOptionsSVG();
options.cssProperties = SVGCSSPropertyLocation.PRESENTATIONATTRIBUTES;
options.documentEncoding = SVGDocumentEncoding.UTF8;
options.fontType = SVGFontType.OUTLINEFONT;
options.fontSubsetting = SVGFontSubsetting.None;
options.preserveEditability = true;

file = new File(svgFolder.fsName + '/' + filename + ".svg");

document.exportFile(file,ExportType.SVG,options);
}

if(pngFolder != null)
{
var options = new ExportOptionsPNG24();
options.antiAliasing = true;
options.transparency = true;
options.artBoardClipping = true;

for(var i = 0; i < sizes.length; i++)
{
size = sizes[i];

file = new File(pngFolder.fsName + '/' + filename + "-" + size + "px.png");

var vertScale = size / document.height;
var horizResult = vertScale * document.width;
var horizScale = Math.round(horizResult) / document.width;

if(vertScale <= 700) {
options.verticalScale = 100 * vertScale;
options.horizontalScale = 100 * horizScale;

document.exportFile(file,ExportType.PNG24,options);
}
}
}

if(jpgFolder != null)
{
var options = new ExportOptionsJPEG();
options.antiAliasing = true;
options.qualitySetting = 100;
options.optimization = true;
options.artBoardClipping = true;

for(var i = 0; i < sizes.length; i++)
{
size = sizes[i];

file = new File(jpgFolder.fsName + '/' + filename + "-" + size + "px.jpg");

var vertScale = size / document.height;
var horizResult = vertScale * document.width;
var horizScale = Math.round(horizResult) / document.width;

if(vertScale <= 700) {
options.verticalScale = 100 * vertScale;
options.horizontalScale = 100 * horizScale;

document.exportFile(file,ExportType.JPEG,options);
}
}
}

Window.alert("Images have been exported!");

document.close(SaveOptions.DONOTSAVECHANGES);
app.open(afile);
}

Most of the time, the images come out great, like this:

Star-256px.jpg

But sometimes, they will come out like this:

Star-300px.jpg

And I have no idea why. I have found that when manually exporting the images through File -> Save for Web... and putting in the same sizes, I get the same results unless I define the anti-aliasing type as Type Optimized. I have not been able to figure out how to do this through javascript, though.

Why are there grey borders on some of my images, and what can I do to get rid of them?