Upload an SVG to Storyboard That

For Power Users and Artists Using Storyboard That

SVG, or Scalable Vector Graphics, is a web image file that is generated by Adobe Illustrator and other vector editing programs. Images that are created in this format and exported can be scaled (increased and decreased in size) without losing quality in the image. This can be extremely useful for users who want the freedom of free sizing.

Steps to Export an SVG in Illustrator

1. Create your desired image in Illustrator.








2. Click File > Save As and select the .svg option.







3. The SVG Options dialogue box will open, and you will be given the option to change the .svg options.

   *Please note: you should click the “more options” button to see all*

   
   
   
   
   
   

   Select the Following:

   • SVG Profiles: SVG 1.1
   • Type: Custom
   • Subsetting: None (Use System Fonts)
   • Image Location: Link
   • Un-check Preserve Illustrator Editing Capabilities
   • CSS Properties: Presentation Attributes
   • Decimal Place: 1
   • Encoding: Unicode (UTF-8)
   • Check: Output fewer < tspan > elements
   • Un-check: Include Slicing Data, Use < textPath > element for Text on Path, Include XMP, and Responsive


4. Click OK.

You have created an SVG image that can now be uploaded to StoryboardThat.com and will be scalable and non-rasterized!

Colorable SVGs

Want to make parts of your .svg image able to be colorable, like the characters and objects on Storyboard That? By incorporating the following HEX codes into your image, you will be able to access color palettes for those sections of your work.

• HEX CODE 1: #1D7A7C
• HEX CODE 2: #199119
• HEX CODE 3: #A51717
• HEX CODE 4: #B5B51F

*Please note: these colors will default to 4 basic colors (Blue, Green, Yellow, and Red) on your image.*

Here is an example:

This square has the correct HEX codes and is uploaded to Storyboard That.

The colors change to the default on the color palette, but now there is the option to change the colors of those sections.

As you can see, you can access the color palette, or even select custom colors, by pressing the down arrow.

Now you can take your graphics further and make your storyboards even better!

Frequently Asked Questions about Upload an SVG to Storyboard That

How do I export an SVG file from Adobe Illustrator for use in Storyboard That?

To export an SVG from Adobe Illustrator for Storyboard That, create your image, go to File > Save As, select .svg as the format, adjust SVG Options (SVG 1.1, Custom type, link images, and uncheck unnecessary boxes), then click OK. Your SVG will be ready to upload and fully scalable.

What are the best SVG export settings for Storyboard That compatibility?

For Storyboard That, use these SVG export settings: SVG Profile 1.1, Type Custom, Subsetting None, Image Location Link, CSS Properties Presentation Attributes, Encoding Unicode (UTF-8), Decimal Places 1, and be sure to uncheck editing and responsive options as specified in the guide.

How can I make parts of my SVG image colorable in Storyboard That?

To make SVG sections colorable, apply these HEX codes to object fills: #1D7A7C (blue), #199119 (green), #A51717 (red), #B5B51F (yellow). Storyboard That recognizes these as color-changeable areas, allowing users to pick new colors from the palette.

Why should I use SVG images instead of raster images on Storyboard That?

SVG images are scalable and maintain high quality at any size, unlike raster formats (e.g., PNG, JPEG) which can become pixelated. SVGs provide flexibility for resizing, editing, and coloring—making them ideal for custom storyboards and graphics.

What do the default colorable HEX codes do in Storyboard That SVG uploads?

The default HEX codes (#1D7A7C, #199119, #A51717, #B5B51F) tell Storyboard That which SVG areas are colorable. When uploaded, these sections show as blue, green, red, or yellow, and users can easily change them using the color palette or custom colors tool.