SVG

  1. Illustrator User Guide
  2. Get to know Illustrator
    1. Introduction to Illustrator
      1. What's new in Illustrator
      2. Common questions
      3. Illustrator system requirements
      4. Illustrator for Apple silicon
    2. Workspace
      1. Workspace basics
      2. Create documents
      3. Tools Default keyboard shortcuts | Illustrator
      4. Tool galleries
      5. Customize keyboard shortcuts
      6. Artboards
      7. Customize the workspace
      8. Properties panel
      9. Set preferences
      10. Touch Workspace
      11. Microsoft Surface Dial support in Illustrator
      12. Recovery, undo, and automation
      13. Rotate view
      14. Rulers, grids, and guides
      15. Accessibility in Illustrator
      16. Safe Mode
      17. View artwork
      18. Use the Touch Bar with Illustrator
      19. Files and templates
      20. Synchronize settings using Adobe Creative Cloud
    3. Tools in Illustrator
      1. Selection
        1. Overview
        2. Selection
        3. Direct Selection
        4. Group Selection
        5. Lasso
        6. Magic Wand
      2. Navigation
        1. Overview
        2. Zoom
        3. Rotate View
      3. Paint
        1. Overview
        2. Gradient
        3. Shape Builder
      4. Type
        1. Overview
        2. Type
        3. Type on path
  3. Illustrator on the iPad
    1. Introduction to Illustrator on the iPad
      1. Illustrator on the iPad overview
      2. Illustrator on the iPad FAQs
      3. System requirements | Illustrator on the iPad
      4. What you can or cannot do on Illustrator on the iPad
    2. Workspace
      1. Illustrator on the iPad workspace
      2. Touch shortcuts and gestures
      3. Keyboard shortcuts for Illustrator on the iPad
      4. Manage your app settings
    3. Documents
      1. Work with documents in Illustrator on the iPad
      2. Import Photoshop and Fresco documents
    4. Select and arrange objects
      1. Create repeat objects
      2. Blend objects
    5. Drawing
      1. Draw and edit paths
      2. Draw and edit shapes
    6. Type
      1. Work with type and fonts
      2. Create text designs along a path
      3. Add your own fonts
    7. Work with images
      1. Vectorize raster images
    8. Color
      1. Apply colors and gradients
  4. Cloud documents
    1. Basics
      1. Work with Illustrator cloud documents
      2. Share and collaborate on Illustrator cloud documents
      3. Upgrade cloud storage for Adobe Illustrator
      4. Illustrator cloud documents | Common questions
    2. Troubleshooting
      1. Troubleshoot create or save issues for Illustrator cloud documents
      2. Troubleshoot Illustrator cloud documents issues
  5. Add and edit content
    1. Drawing
      1. Drawing basics
      2. Edit paths
      3. Draw pixel-perfect art
      4. Draw with the Pen, Curvature, or Pencil tool
      5. Draw simple lines and shapes
      6. Image Trace
      7. Simplify a path
      8. Define perspective grids
      9. Symbolism tools and symbol sets
      10. Adjust path segments
      11. Design a flower in 5 easy steps
      12. Perspective drawing
      13. Symbols
      14. Draw pixel-aligned paths for web workflows
    2. 3D effects and Adobe Substance materials
      1. About 3D effects in Illustrator
      2. Create 3D graphics
      3. Create 3D objects
      4. Create 3D Text
    3. Color
      1. About color
      2. Select colors
      3. Use and create swatches
      4. Adjust colors
      5. Use the Adobe Color Themes panel
      6. Color groups (harmonies)
      7. Color Themes panel
      8. Recolor your artwork
    4. Painting
      1. About painting
      2. Paint with fills and strokes
      3. Live Paint groups
      4. Gradients
      5. Brushes
      6. Transparency and blending modes
      7. Apply stroke on an object
      8. Create and edit patterns
      9. Meshes
      10. Patterns
    5. Select and arrange objects
      1. Select objects
      2. Layers
      3. Group and expand objects
      4. Move, align, and distribute objects
      5. Stack objects    
      6. Lock, hide, and delete objects
      7. Duplicate objects
      8. Rotate and reflect objects
    6. Reshape objects
      1. Crop images
      2. Transform objects
      3. Combine objects
      4. Cut, divide, and trim objects
      5. Puppet Warp
      6. Scale, shear, and distort objects
      7. Blend objects
      8. Reshape using envelopes
      9. Reshape objects with effects
      10. Build new shapes with Shaper and Shape Builder tools
      11. Work with Live Corners
      12. Enhanced reshape workflows with touch support
      13. Edit clipping masks
      14. Live shapes
      15. Create shapes using the Shape Builder tool
      16. Global editing
    7. Type
      1. Create text
      2. Fonts and typography
      3. Format type
      4. Import and export text
      5. Format paragraphs
      6. Special characters
      7. Create type on a path
      8. Character and paragraph styles
      9. Tabs
      10. Text and type
      11. Find missing fonts (Typekit workflow)
      12. Update text from Illustrator 10
      13. Arabic and Hebrew type
      14. Fonts | FAQ and troubleshooting tips
      15. Create 3D text effect
      16. Creative typography designs
      17. Scale and rotate type
      18. Line and character spacing
      19. Hyphenation and line breaks
      20. Text enhancements
      21. Spelling and language dictionaries
      22. Format Asian characters
      23. Composers for Asian scripts
      24. Create text designs with blend objects
      25. Create a text poster using Image Trace
    8. Create special effects
      1. Work with effects
      2. Graphic styles
      3. Create a drop shadow
      4. Appearance attributes
      5. Create sketches and mosaics
      6. Drop shadows, glows, and feathering
      7. Summary of effects
    9. Web graphics
      1. Best practices for creating web graphics
      2. Graphs
      3. SVG
      4. Create animations
      5. Slices and image maps
  6. Import, export, and save
    1. Import
      1. Import artwork files
      2. Import bitmap images
      3. Import artwork from Photoshop
      4. Place multiple files | Illustrator CC
      5. Unembed images
      6. Import Adobe PDF files
      7. Import EPS, DCS, and AutoCAD files
      8. Links information
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Save
      1. Save artwork
    4. Export
      1. Use Illustrator artwork in Photoshop
      2. Export artwork
      3. Collect assets and export in batches
      4. Package files
      5. Create Adobe PDF files
      6. Extract CSS | Illustrator CC
      7. Adobe PDF options
      8. File information and metadata
  7. Printing
    1. Prepare for printing
      1. Set up documents for printing
      2. Change the page size and orientation
      3. Specify crop marks for trimming or aligning
      4. Get started with large canvas
    2. Printing
      1. Overprint
      2. Print with color management
      3. PostScript printing
      4. Print presets
      5. Printer's marks and bleeds
      6. Print and save transparent artwork
      7. Trapping
      8. Print color separations
      9. Print gradients, meshes, and color blends
      10. White Overprint
  8. Automate tasks
    1. Data merge using the Variables panel
    2. Automation with scripts
    3. Automation with actions
  9. Troubleshooting 
    1. Crash on launch issues
    2. Recover files after crash
    3. File issues
    4. GPU device driver issues
    5. Wacom device issues
    6. DLL file issues
    7. Memory issues
    8. Preferences file issues
    9. Font issues
    10. Printer issues
    11. Share crash report with Adobe

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

Bitmap image formats for the web—GIF, JPEG, WBMP, and PNG—describe images using a grid of pixels. The resulting files tend to be bulky, limited to a single (often low) resolution, and consume large amounts of bandwidth on the web. SVG, on the other hand, 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. 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 will 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. With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tooltips, audio, and animation.

You can save artwork in SVG format using the Save, Save As, Save A Copy, or Save For Web & Devices command. 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.

How you set up your artwork in Illustrator will affect the resulting SVG file. Keep in mind the following guidelines:

  • Use layers to add structure to an SVG file. When you save artwork in SVG format, each layer is converted to a group (<g>) element. (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. If you alter opacity at the layer level, the resulting SVG file will not display transparency as it appears in Illustrator.

  • Raster data is not scalable in the SVG Viewer and cannot be edited like other SVG elements. If possible, avoid creating artwork that will be rasterized in the SVG file. Gradient meshes and objects that use the Rasterize, Artistic, Blur, Brush Strokes, Distort, Pixelate, Sharpen, Sketch, Stylize, Texture, and Video effects are rasterized when saved in SVG format. Similarly, graphic styles that include these effects also produce rasterization. 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. Scripts can also use the document object model (DOM) to access and modify the SVG file—inserting or deleting SVG elements, for example.

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.

Poznámka:

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.

  1. Select an object or group (or target a layer in the Layers panel).
  2. Do one of the following:
    • To apply an effect with its default settings, select the effect from the bottom section of the Effect > SVG Filters submenu.

    • To apply an effect with custom settings, choose Effect > SVG Filters > Apply SVG Filter. In the dialog box, select the effect, and click the Edit SVG Filter button  . Edit the default code and click OK.

    • To create and apply a new effect, choose Effect > SVG Filters > Apply SVG Filter. In the dialog box, click the New SVG Filter button  , enter the new code, and click 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.

      Note: 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

  1. Choose Effect > SVG Filter > Import SVG Filter.

  2. Select the SVG file you want to import effects from and click Open.

SVG Interactivity panel overview

You 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. The SVG Interactivity panel also lets you see all the events and JavaScript files associated with the current file.

Delete an event from the SVG Interactivity panel

  • To delete one event, select it and click the Delete button or choose Delete Event from the panel menu.
  • To delete all events, choose Clear Events from the panel menu.

List, add, or remove events linked to a file

  1. Click the Link JavaScript Files button  .
  2. In the JavaScript Files dialog box, select a JavaScript entry and do one of the following:
    • Click Add to browse for additional JavaScript files.

    • Click Remove to remove the selected JavaScript entry.

Add SVG interactivity to artwork

  1. In the SVG Interactivity panel, select an event. (See SVG events.)

  2. Enter the corresponding JavaScript, and press Enter.

SVG events

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.

Web-optimized SVG export options

A new SVG Export (File > Export > SVG) option is available. The new workflow allows you to generate standardized, web-optimized SVG files for your web and screen design projects.

The options available are:

  • Styling: Choose how visual styling information is stored in the SVG markup.
    • Presentation Attributes: Uses separate XML attributes for each individual style property on each SVG tag. This format is required to use SVG assets with Android Studio.
    • Internal CSS: Uses a single `<style>` tag with CSS classes, sharing styling settings between objects that have the same styles. This may lead to smaller file sizes.
    • Inline Style: Uses a single `style` attribute per SVG tag, containing all tag’s style properties combined in CSS syntax.

Note: The default styling for SVG is set to Presentation Attributes because it improves compatibility with common developer tools, such as Android Studio.

  • Font. Choose how fonts are represented in the SVG file. Outlines preserve the path definition , and are most compatible.
  • Images: Choose if you want images to be saved as embedded within the document or linked files external to the document.
  • Object IDs: Choose how ID types (names) are assigned to objects in the SVG file. Choose between Layer Names, Minimal, or Unique.This option determines how duplicate names of objects are handled, and how objects are named in the exported CSS.
  • Decimal: Choose how much information you want to preserve the precision of object locations. A higher value for Decimal will increase the precision of how objects are laid out, and this increases the visual fidelity of the rendered SVG. However, increasing the value of Decimal also increases the file size of the resulting exported SVG.
  • Minify: Optimizes the file size of the SVG by removing empty groups and blank spaces. Choosing this option also reduces the readability of the resulting SVG code.
  • Responsive. Checking this option ensures that the SVG generated scales within a browser. No absolute size values are written.
  • Show Code: Opens the exported content in your default text editor.
  • Show in browser (icon): Displays the image in your default web browser.
Logo Adobe

Prihláste sa do svojho účtu