User Guide Cancel

Work with SVGs in Adobe Captivate

Last updated on Sep 18, 2023

Captivate User Guide
Introduction to Captivate
1. What's New in Adobe Captivate
2. Adobe Captivate System Requirements
3. Adobe Captivate Updates
4. Download Adobe Captivate
5. Frequently Asked Questions
Add a slide
1. Slide navigator in Adobe Captivate
2. Add a conversation slide
3. Add characters to your Adobe Captivate project
4. Edit the background image on a slide
5. Add padding to content blocks and components
6. Create a long scroll project
Add text blocks
1. Add text to a project
Add media blocks
1. Add images to a project
2. Add videos to a project
3. Add quotes
4. Add SVGs to a project
Interactive components
1. Add a button
2. Add an input field
3. Add a radio button group
4. Add a dropdown
5. Add a checkbox
Widgets
1. Add a Card
2. Add Tabs
3. Add a Certificate
4. Add a Carousel
5. Add a Hotspot
6. Add Drag-and-Drop
7. Add a Timeline
8. Add Click to Reveal
Create quizzes
1. Add a Multiple-choice question
2. Add a True or false question
3. Add a Match the column question
4. Add a Short answer question
5. Add a Sequence question
6. Add question pools and random question slides
7. Import questions as CSV
Add audio to a project
1. Add audio
Interactions
1. Add interactions to a project
2. Create interactive video with overlay
3. Create a slide-level interaction
4. Create an object-level interaction
Animations
1. Add animations to a project
Accessibility
1. Make a project accessible
Customize the timeline
1. Timeline panel in Adobe Captivate
Customize TOC and Playbar
1. Table of Contents in Adobe Captivate
Edit project properties
1. Variables in Adobe Captivate
2. Preferences
3. Project dimensions
4. Themes
Create a simulation project
1. Simulation
Preview a project
1. Preview
Share a project for review
1. Share for review
Publish a project
1. Publish your project
Upgrade projects in Adobe Captivate
1. Upgrade projects to the latest version

Learn how to insert an SVG into a project in Adobe Captivate.

Note:

Adobe Captivate introduces content blocks, such as text or an image block, which contain components like text, image, or button. Play this video to learn more about content blocks and components.

SVG is a vector image format that can be scaled without losing quality and supports animation. You can also use SVGs in Adobe Captivate for various purposes, such as adding illustrations, icons, diagrams, or other visual elements to your projects.

Add an SVG content block

Select Add media blocks > SVG in the left toolbar.

Change the properties of the SVG content block

The block-level properties are available when you select the SVG content block. You can change the properties available under the various sections, such as Alignment and Spacing, Replacing an SVG, Design Options, Components, and Appearance.

In the Visual Properties panel, the Content Width slider and Horizontal Padding are linked in the Alignment and Spacing section. Moving the slider from the left side changes the left padding value, and moving the slider from right changes the right padding value. The exact change is replicated in the Content Width slider when you change the left or right Horizontal padding values.

If you want to add padding at the top or bottom of the selected content block, enter the desired values for the Top and Bottom padding by changing the values in Vertical padding.

Select the Autofit height checkbox to adjust the height of the SVG content block to fit the slide.
Move the Number of icons slider to increase or decrease the number of SVGs. You can add, at most, four SVGs.
Replace the SVG icons by clicking the folder icons. Click any folder and select an SVG from Assets or your computer.
Select a design option. The Design Options presents pre-configured layouts with cleaner design elements to apply to the SVG content block.

For more information, view Design options in Adobe Captivate.
In the Components section, you can change the following:
- Icon: This option remains disabled.
Move the Scale slider to resize the SVGs without distorting them. Scaling means that the SVGs fit the available width.
- Title: Add or remove the titles of the SVGs.
- Caption: Add or remove the captions of the SVGs.
- Body: Add or remove the body text of the SVGs.
- Card: Add or remove the card around the SVGs.
Note:

You can align the components in the Components section. Hover over a component and select any option (Align left, Align center, or Align right).
In the Background tab of the Appearance section, you can change the color settings at the content block level. Add the background color, border, and apply a shadow to shadow to the border. Select a solid color, linear or radial gradient, or add an image as a background.
If you've enabled Card, you can change the card's properties, such as padding, and add rounded corners by changing the radius values.

Also, add a background color, border, or shadow in the Card tab.

Change the properties of an SVG card

Adobe Captivate lets you select an SVG card and change its properties like text, caption, card, or appearance.

Select an SVG card in the content block.
In the Components section, you can change the following:
- Icon: Add or remove the SVG icon. Move the Scale slider to resize the SVG icon without distorting it. Scaling means that the SVG fits the available width.
- Title: Add or remove the SVG's title on the card.
- Caption: Add or remove the SVG's caption on the card.
- Body: Add or remove the SVG's body text on the card.
- Card: Add or remove the card around the SVG.
Note:

You can align the components in the Components section. Hover over a component and select any option (Align left, Align center, or Align right).
If you've enabled Card, you can change the card's properties, such as padding, and add rounded corners by changing the radius values.

Also, add a background color, border, or shadow in the Card tab.

Change text in an SVG block

Select any text, for example, title or caption, in an SVG block, and change its properties in the Visual Properties panel.

For more information, view Work with text in Adobe Captivate.

Replace the default SVG icon

Adobe Captivate lets replace an SVG icon and change its appearance.

Select an SVG card in the content block.
After replacing the default SVG icon, select the SVG icon. Then select Assets and then select an SVG from the Assets or your computer.

Select an SVG
Click Replace icon.

Change the appearance of the SVG

Select the SVG.
In the States section, click Add to launch the States Flyout. Add the SVG's custom states.

For more information, view States in Adobe Captivate.
Select the folder icon in the Icon section to replace the SVG from Assets or on your computer.
Flip the SVG horizontally or vertically in the Flip icon section.
In the Appearance section, move the Opacity slider to increase or decrease the transparency of the SVG.
Select the SVG path and apply the fill color from the Solid color picker to change its color.
Select the checkbox Enable clicking in the bounding box to make the SVG and its whitespace within its bounding box clickable at runtime.