Lietotāja rokasgrāmata Atcelt

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. Learn faster with the Illustrator Discover panel
      3. Create documents
      4. Toolbar
      5. Default keyboard shortcuts
      6. Customize keyboard shortcuts
      7. Introduction to artboards
      8. Manage artboards
      9. Customize the workspace
      10. Properties panel
      11. Set preferences
      12. Touch Workspace
      13. Microsoft Surface Dial support in Illustrator
      14. Undo edits and manage design history
      15. Rotate view
      16. Rulers, grids, and guides
      17. Accessibility in Illustrator
      18. Safe Mode
      19. View artwork
      20. Use the Touch Bar with Illustrator
      21. Files and templates
    3. Tools in Illustrator
      1. Tools at a glance
      2. Select tools
        1. Selection
        2. Direct Selection
        3. Group Selection
        4. Magic Wand
        5. Lasso
        6. Artboard
      3. Navigate tools
        1. Hand
        2. Rotate View
        3. Zoom
      4. Paint tools
        1. Gradient
        2. Mesh
        3. Shape Builder
      5. Text tools
        1. Type
        2. Type on a Path
        3. Vertical Type
      6. Draw tools
        1. Pen
        2. Add Anchor Point
        3. Delete Anchor Point
        4. Anchor Point
        5. Curvature
        6. Line Segment
        7. Rectangle
        8. Rounded Rectangle
        9. Ellipse
        10. Polygon
        11. Star
        12. Paintbrush
        13. Blob Brush
        14. Pencil
        15. Shaper
        16. Slice
      7. Modify tools
        1. Rotate
        2. Reflect
        3. Scale
        4. Shear
        5. Width
        6. Free Transform
        7. Eyedropper
        8. Blend
        9. Eraser
        10. Scissors
    4. Quick actions
      1. Retro text
      2. Neon glow text
      3. Old school text
      4. Recolor
      5. Convert sketch to vector
  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. Share documents for review
      4. Upgrade cloud storage for Adobe Illustrator
      5. 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 objects and materials
      1. About 3D effects in Illustrator
      2. Create 3D graphics
      3. Map artwork over 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. Copy and duplicate objects
      8. Rotate and reflect objects
      9. Intertwine 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. Add text and work with type objects
      2. Create bulleted and numbered lists
      3. Manage text area
      4. Fonts and typography
      5. Format type
      6. Import and export text
      7. Format paragraphs
      8. Special characters
      9. Create type on a path
      10. Character and paragraph styles
      11. Tabs
      12. Text and type
      13. Find missing fonts (Typekit workflow)
      14. Update text from Illustrator 10
      15. Arabic and Hebrew type
      16. Fonts | FAQ and troubleshooting tips
      17. Create 3D text effect
      18. Creative typography designs
      19. Scale and rotate type
      20. Line and character spacing
      21. Hyphenation and line breaks
      22. Text enhancements
      23. Spelling and language dictionaries
      24. Format Asian characters
      25. Composers for Asian scripts
      26. Create text designs with blend objects
      27. 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. Place multiple files
      2. Manage linked and embedded files
      3. Links information
      4. Unembed images
      5. Import artwork from Photoshop
      6. Import bitmap images
      7. Import Adobe PDF files
      8. Import EPS, DCS, and AutoCAD files
    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 issues
    2. Recover files after crash
    3. File issues
    4. Supported file formats
    5. GPU device driver issues
    6. Wacom device issues
    7. DLL file issues
    8. Memory issues
    9. Preferences file issues
    10. Font issues
    11. Printer issues
    12. Share crash report with Adobe
    13. Improve Illustrator performance

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.

Piezīme.

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. To apply an effect,do one of the following:

    With default settings

    Go to Effect > SVG Filters > Apply SVG Filter.

    With custom settings

    1. Go to Effect > SVG Filters > Apply SVG Filter.

    2. 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

    1. Go to Effect > SVG Filters > Apply SVG Filter.

    2. 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.

Piezīme.

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

  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.

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

Ask the Community

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.

Adobe logotips

Pierakstieties savā kontā