- Illustrator User Guide
- Get to know Illustrator
- Introduction to Illustrator
- Workspace
- Workspace basics
- Learn faster with the Illustrator Discover panel
- Create documents
- Toolbar
- Default keyboard shortcuts
- Customize keyboard shortcuts
- Introduction to artboards
- Manage artboards
- Customize the workspace
- Properties panel
- Set preferences
- Touch Workspace
- Microsoft Surface Dial support in Illustrator
- Undo edits and manage design history
- Rotate view
- Rulers, grids, and guides
- Accessibility in Illustrator
- Safe Mode
- View artwork
- Use the Touch Bar with Illustrator
- Files and templates
- Tools in Illustrator
- Tools at a glance
- Select tools
- Navigate tools
- Paint tools
- Text tools
- Draw tools
- Modify tools
- Generative AI (not available in mainland China)
- Quick actions
- Illustrator on the web (beta)
- Illustrator on the web (beta) overview
- Illustrator on the web (beta) FAQ
- Troubleshooting issues FAQ
- Keyboard shortcuts for Illustrator on the web (beta)
- Create and combine shapes on the web
- Add and edit text on the web
- Apply colors and gradients on the web
- Draw and edit paths on the web
- Work with cloud documents on the web
- Invite collaborators to edit on the web
- Illustrator on the iPad
- Introduction to Illustrator on the iPad
- Workspace
- Documents
- Select and arrange objects
- Drawing
- Type
- Work with images
- Color
- Cloud documents
- Basics
- Troubleshooting
- Add and edit content
- Drawing and dimensioning
- Drawing basics
- Edit paths
- Draw pixel-perfect art
- Draw with the Pen, Curvature, or Pencil tool
- Draw simple lines and shapes
- Draw rectangular and polar grids
- Draw and edit flares
- Image Trace
- Simplify a path
- Symbolism tools and symbol sets
- Adjust path segments
- Design a flower in 5 easy steps
- Create and edit a perspective grid
- Draw and modify objects on a perspective grid
- Use objects as symbols for repeat use
- Draw pixel-aligned paths for web workflows
- Measure and plot dimensions
- 3D objects and materials
- Color
- Painting
- Select and arrange objects
- Reshape objects
- Crop images
- Transform objects
- Combine objects
- Cut, divide, and trim objects
- Puppet Warp
- Scale, shear, and distort objects
- Blend objects
- Reshape using envelopes
- Reshape objects with effects
- Build new shapes with Shaper and Shape Builder tools
- Work with Live Corners
- Enhanced reshape workflows with touch support
- Edit clipping masks
- Live shapes
- Create shapes using the Shape Builder tool
- Global editing
- Type
- Add text and work with type objects
- Create bulleted and numbered lists
- Manage text area
- Fonts and typography
- Convert text within images into editable text
- Add basic formatting to text
- Add advanced formatting to text
- Import and export text
- Format paragraphs
- Special characters
- Create type on a path
- Character and paragraph styles
- Tabs
- Find missing fonts (Typekit workflow)
- Arabic and Hebrew type
- Fonts | FAQ and troubleshooting tips
- Create 3D text effect
- Creative typography designs
- Scale and rotate type
- Line and character spacing
- Hyphenation and line breaks
- Spelling and language dictionaries
- Format Asian characters
- Composers for Asian scripts
- Create text designs with blend objects
- Create a text poster using Image Trace
- Create special effects
- Web graphics
- Drawing and dimensioning
- Import, export, and save
- Import
- Creative Cloud Libraries in Illustrator
- Save and export
- Printing
- Prepare for printing
- Printing
- Automate tasks
- Troubleshooting
Learn about working with SVG to use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.
About SVG
SVG is a vector format that describes images as shapes, paths, text, and filter effects. The resulting files are compact and provide high-quality graphics on the web, in print, and even on resource-constrained, handheld devices, unlike GIF, JPEG, WBMP, and PNG, which are bulky. Users can magnify their view of an SVG image on‑screen without sacrificing sharpness, detail, or clarity. In addition, SVG provides superior support for text and colors, which ensures that users see images as they appear on your Illustrator artboard.
The SVG format is entirely XML-based and offers many advantages to developers and users alike.
You can save artwork in SVG format using the Save, Save As, Save A Copy, or Save For Web & Devices commands. To access the complete set of SVG export options, use the Save, Save As, or Save A Copy command. The Save For Web & Devices command provides a subset of SVG export options which are applicable to web-oriented work.
Apply SVG effects
You can use SVG effects to add graphic properties such as drop shadows to your artwork. SVG effects differ from their bitmap counterparts in that they are XML-based and resolution-independent. In fact, an SVG effect is nothing more than a series of XML properties that describe various mathematical operations. The resulting effect is rendered to the target object instead of the source graphic.
Illustrator provides a default set of SVG effects. You can use the effects with their default properties, edit the XML code to produce custom effects, or write new SVG effects.
To modify Illustrator’s default SVG filters, use a text editor to edit the Adobe SVG Filters. svg file in the Documents and Settings/<userdir>/Application Data/Adobe/Adobe Illustrator <version number> Settings/<location> folder. You can modify existing filter definitions, delete filter definitions, and add new filter definitions.
-
Select an object or group (or target a layer in the Layers panel).
-
To apply an effect,do one of the following:
With default settings
Go to Effect > SVG Filters > Apply SVG Filter.
With custom settings
-
Go to Effect > SVG Filters > Apply SVG Filter.
-
In the dialog box, select the effect and then select the Edit SVG Filter . Edit the default code and select OK.
create and apply a new effect
-
Go to Effect > SVG Filters > Apply SVG Filter.
-
In the dialog box, select the effect and then select the New SVG Filter . Enter the new code and select OK.
-
When you apply an SVG filter effect, Illustrator displays a rasterized version of the effect on the artboard. You can control the resolution of this preview image by modifying the document's rasterization resolution setting.
An SVG effect must be the last effect when an object uses multiple effects; in other words, it must appear at the bottom of the Appearance panel (just above the Transparency entry). If other effects follow an SVG effect, the SVG output will consist of a raster object.
Import effects from an SVG file
-
Choose Effect > SVG Filter > Import SVG Filter.
-
Select the SVG file you want to import effects from and select Open.
SVG Interactivity panel overview
The SVG Interactivity panel lets you see all the events and JavaScript files associated with the current file.
You can use the SVG Interactivity panel (Window > SVG Interactivity) to add interactivity to your artwork when it is exported for viewing in a web browser. For example, by creating an event that triggers a JavaScript command, you can quickly create movement on a web page when the user performs an action, such as moving a mouse cursor over an object.
Delete an event from the SVG Interactivity panel
You can use SVG Interactivity panel to delete one or all events.
To delete one event
- Select the event and select Remove Selected Entry .
To delete all events
- Select Clear Events from the panel menu .
List, add, or remove events linked to a file
Select the Link JavaScript files and select Add to add additional JavaScript files, whereas to remove the selected JavaScript entry, select Remove.
Add SVG Interactivity to artwork
-
In the SVG Interactivity panel, select an Event. (See SVG events.)
-
Enter the corresponding JavaScript, and press Enter.
onfocusin
Triggers the action when the element receives focus, such as selection by the pointer.
onfocusout
Triggers the action when the element loses focus (often when another element receives focus).
onactivate
Triggers the action with a mouse click or keypress, depending upon the SVG element.
onmousedown
Triggers the action when the mouse button is pressed down over an element.
onmouseup
Triggers the action when the mouse button is released over an element.
onclick
Triggers the action when the mouse is clicked over an element.
onmouseover
Triggers the action when the pointer is moved onto an element.
onmousemove
Triggers the action while the pointer is over an element.
onmouseout
Triggers the action when the pointer is moved away from an element.
onkeydown
Triggers the action when a key is pressed down.
onkeypress
Triggers the action while a key is pressed down.
onkeyup
Triggers the action when a key is released.
onload
Triggers the action after the SVG document has been completely parsed by the browser. Use this event to call one-time-only initialization functions.
onerror
Triggers the action when an element does not load properly or another error occurs.
onabort
Triggers the action when the page loading is stopped before the element is completely loaded.
onunload
Triggers the action when the SVG document is removed from a window or frame.
onzoom
Triggers the action when the zoom level is changed for the document.
onresize
Triggers the action when the document view is resized.
onscroll
Triggers the action when the document view is scrolled or panned.
Tips for creating SVG files
Use layers to add structure to an SVG file. Each layer is converted to a group (<g>) element when you save artwork in SVG format. (For example, a layer named Button1 becomes <g id="Button1_ver3.0"> in the SVG file.) Nested layers become SVG nested groups, and hidden layers are preserved with the display="none" SVG styling property.
If you want objects on different layers to appear transparent, adjust the opacity of each object instead of each layer.
Raster data isn't scalable in the SVG Viewer and cannot be edited like other SVG elements. You can just avoid creating artwork that will be rasterized in the SVG file. Use SVG effects to add graphic effects without causing rasterization.
Use symbols and simplify the paths in your artwork to improve SVG performance. Also, avoid using brushes that produce a lot of path data, such as the Charcoal, Fire Ash, and Scroll Pen, if performance is a high priority.
Use slices, image maps, and scripts to add web links to an SVG file.
A scripting language, such as JavaScript, opens unlimited functionality to an SVG file. Pointer and keyboard movements can invoke scripting functions such as rollover effects.
Web-optimized SVG export options
A new SVG Export (File > Export > Export As > SVG) option is available. The new workflow allows you to generate standardized, web-optimized SVG files for your web and screen design projects. For more information, see SVG export options.
Related Resources
Talk to us
If you've a question to ask or an idea to share, come and participate in Adobe Illustrator Community. We would love to hear from you.