Studio Editor: Working With Vector Art and Basic Shapes
5 min
In this article
- Adding vector art and basic shapes
- Designing vector art and basic shapes
- Adjusting the settings of basic shapes and vector art
- Adding a link to basic shapes and vector art
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
on the left side of the editor.Upload your own SVG
on the left side of 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:
- Go to your editor.
- 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. You can add a link, make the element accessible with alt text, or set it as decorative if it's purely for design purposes. Additionally, you can ensure the element keeps its original proportions when resizing, or decide that you want it resize it freely.
To adjust the settings:
- Go to your editor.
- Select the relevant vector art or basic shape element.
- Click the Settings icon
. - Choose what to do next:
- Add a link to the vector art / basic shape.
- Decide whether or not this element needs alt text:
- What's in the image?: Enter a short description of what you can see in this vector art or basic shape, to help search engines and accessibility tools.
- This image is decorative: Select this option if this vector art / basic shape does not contain important information for screen readers, only meant to decorate the page.
- Enable the Keep original proportions 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:
- Go to your editor.
- 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.
