Studio Editor: Working With Vector Art and Basic Shapes
Enhance your design with striking vector art and basic shapes. These scalable illustrations and icons (SVGs) maintain perfect quality at any size, making them ideal for responsive sites. Choose from Wix Studio’s library of free vector art and basic shapes, or upload your own SVGs to align with your client’s brand.
Tip:
Vector art files often include multiple colors, while basic shapes focus on a single color. However, they're both SVG files.
Adding vector art and basic shapes
You can use vector art and basic shapes to decorate your client's site, or as an appealing call-to-action. You can either choose from the hundreds of free options available from Wix Studio, or you can upload your own.
Click an option below to learn more.
Choose from the free options available from Wix
Click Add Elements
on the left side of the editor.
Click Decorative.
Click any category under Shapes or Vector Art.
Tip: Access many more free suggestions by clicking More Basic Shapes or All Vector Art.
Drag your chosen SVG onto the page.
Upload your own SVG
Click Media
on the left side of the editor.
(In the Media Manager) Click + Upload Media.
Select your file(s) from your computer.
Click Open.
Select the SVG you just uploaded and click Add to Page.
Tip:
When uploading your SVG file, we analyze its colors and classify it either as a basic shape element or a vector art element. For instance, SVG files that only show a single color will appear as 'basic shapes' in the editor.
Designing vector art and basic shapes
Customize the vector art / basic shape element, including the colors, opacity, and shadow, so it truly complements your design.
Note:
The available customization options depend on whether the vector art features a single color, multiple colors, or a grayscale palette.
To customize the design:
Select the relevant vector art or basic shape element.
Click the Open Inspector icon
at the top right of the editor.
Design the vector art / basic shape using the available options:
Basic shape: Change the fill color and opacity, add a border and apply a shadow.
Vector art: Change the fill color(s), adjust the opacity and apply a shadow.
Note: It is not possible to change the opacity separately for each color of the vector art.
Uploaded your own SVG?
If we are not able to identify the colors in your SVG file, you may not be able to customize the colors in the editor.
Adjusting the settings of basic shapes and vector art
Tweak the vector art or basic shape settings to your liking. Add a link to turn the element into a button and add alt text to make it accessible. Additionally, you can ensure the element keeps its original proportions when resizing, or decide that you want to resize it freely.
To adjust the settings:
Select the relevant vector art or basic shape element.
Click the Settings icon
.
Choose what to do next:
Want to add a link?: Add a link to the vector art / basic shape.
What's this shape / What's in the vector art?: Enter a short description of what you can see in this vector art or basic shape, to help search engines and accessibility tools.
Keep original proportions: Enable this toggle to ensure the element's original proportions are maintained when you resize it.
Adding a link to basic shapes and vector art
Add a link to turn the element into a button or call-to-action. You can link to many places, such as a site page, an external URL, or even a phone number. Adding a link is a great way to encourage interactivity from site visitors, and create something that is both eye-catching and functional.
To add a link:
Select the relevant vector art or basic shape element.
Click the Link icon
.
Select the type of link from the list on the left.
Enter the relevant information.
Click Done.
