• Stars
    star
    306
  • Rank 136,456 (Top 3 %)
  • Language
    JavaScript
  • Created about 10 years ago
  • Updated almost 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

SVG Optimizer for Adobe Illustrator

SVG NOW for Adobe Illustrator

image

SVG NOW is an alternative SVG exporter for Adobe Illustrator currently under development. It is aimed at optimizing SVG files by post-processing the generated SVG code using SVGO.

Creative Cloud members can install a beta version of this panel from the creative cloud add-ons website. It is free, open source (under MIT license) and will always be.

image

Artworks in the the examples folder remain the property of their respective authors and shall not be redistributed without their permission.

Release notes

v0.2 / beta 2 (Nov 18th 2014)

By popular demand, all SVGO plugins can now be enabled or disabled via checkboxes in the panel. Default values match the default values of the SVGO project.

v0.1 / beta 1 (Nov 10th 2014)

First beta release.

FAQ

Why?

A much smaller & cleaner SVG code without modifying the underlying artwork. Using default parameters, file size typically decreases by 30% - 50% depending on the nature of the artwork. Note that there is no file compression, only code optimisation.

image

Please note that you can definitely optimize such an artwork even further by using Illustrator's path simplication tool (Object > Path > Simplify) and enter a value comprised between 90% and 100%. Results can be pretty amazing. As you can see with the following example, combining both path simplification and SVGO/SVG Now optimization, you can save up to 80% (before compression) in a matter of seconds with little to no visual difference from the original artwork. Once compressed (which your webserver will probably do for you), the SVG file comes down to an impressive 73 Kb.

image

Also, keep in mind that fonts are outlined by default. If your artwork contains a lot of text and can deal with the obvious consequences, you should turn off this option.

What optimizations are performed? Can this damage my artwork?

A lot of optimizations are done. Please refer to the SVGO project page for more info.

If everything goes well, your artwork should not be visually modified. There are however exceptions, and you should always double check and try different option combos if necessary.

How is that different from Illustrator's own SVG exporter?

It is built on top of Illustrator's SVG exporter, controls some of its parameters and default values, and runs the node module version of SVGO with an HTML GUI built on top of it to control all its plugins.

How is that different from the Illustrator Layer Exporter panel?

Illustrator Layer Exporter's goal is to help generating complex compositions consisting of various image files, including SVG. I guess I could include SVG Exporter in Illustrator Layer Exporter once it's mature enough, which is not the case right now. You can however post process SVG files generated by Layer Exporter with SVG Now, but you'll have to do it by yourself, manually.

Is this an official Adobe project?

Nope, this is completely unofficial. I happen to work for Adobe, but not as a developer. I do this on my freetime.

Can I contribute to this project?

Definitely. Since this mainly a shell on top of SVGO, if you're looking for adding new optimization or fixing related bugs or issues, please contribute to the SVGO project or its various plugins.

If you want to improve this panel (UI/UX, and any non-SVGO features) please contribute to this project directly.

image

More Repositories

1

Illustrator-Layer-Exporter

A panel for Illustrator to easily export all layers
JavaScript
286
star
2

CC-Extension-Builder-for-Brackets

A brackets Extension for building Creative Cloud extensions
JavaScript
94
star
3

CC-Extension-Builder-for-Sublime-Text

Sublime plugin for creating HTML panels in Photoshop and other Creative Cloud apps
Python
69
star
4

CSscripts

Scripts for Photoshop, Illustrator, and other Adobe Creative tools
JavaScript
69
star
5

CC-EXT-SDK

Unofficial SDK for building HTML based extensions for Adobe Creative Cloud applications
JavaScript
67
star
6

createjs-utils

Utilities I use for createJS development
JavaScript
67
star
7

Lita

Adobe AIR based SQLite administration (discontinued project)
ActionScript
54
star
8

ccext-boilerplate

No longer maintained (now merged with CC SDK)
JavaScript
34
star
9

Brackets-extension-toolkit

An extension to learn how to build extensions
JavaScript
25
star
10

sample-cc-extensions

A collection of HTML based extensions for creative cloud applications
JavaScript
25
star
11

prefixr-extension

Simple prefixr extension for brackets
JavaScript
18
star
12

annotate-extension

Brackets extension to generate JSDoc annotations
JavaScript
18
star
13

after2css

JavaScript
15
star
14

Edge-Animate-for-developers

An technical introduction to Edge Animate for web developers
JavaScript
13
star
15

tabtospace-extension

Brackets extension to switch tabs to spaces
JavaScript
10
star
16

appcache-gen

application cache generator extension for brackets
JavaScript
8
star
17

lupo-studio

A collection of utilities for flex app i18n
ActionScript
6
star
18

togist

simple brackets extension to create a gist from selection
JavaScript
5
star
19

brackets-architecture-article

An overview of Brackets code architecture
5
star
20

brackets-buildsys

A stupid simple build system for Brackets
JavaScript
3
star
21

require-test

Simple CRUD app using requirejs
JavaScript
2
star
22

Before-Going-Vector

Assets for the Adobe MAX Session What You Should Know Before Going Vector
JavaScript
2
star
23

AILayerExporterPage

Web Page for the Illustrator Layer Exporter
2
star
24

GitTest

simple test
ActionScript
1
star
25

createjs-rpg

A simple RPG battle engine made with createJS for demo purposes
JavaScript
1
star
26

try_git

1
star
27

createJS-intro

JavaScript
1
star
28

ccext-website

Simple webpage from presenting CC extensibility tools
1
star
29

require-test-bb

backbone tests
JavaScript
1
star
30

doc-gen

Brackets extension to generate documentation
JavaScript
1
star
31

davidderaedt

About me
1
star