How to replace the SVG shapes?

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work within a vector-based graphic software. You can use SVG on the web pretty easily. Here are some pros of using SVG in web design:

  • Small file sizes that compress well
  • Scales to any size without losing clarity (except very tiny)
  • Looks great on retina displays
  • Design control like interactivity and filters

We use SVG files in some of our demos and you as an owner, might need to replace or edit some of them to match your brand or design. Here are the main steps to do that:

  • Save the inline SVG code as an SVG formatted file
  • Edit or replace the shapes as you like
  • Export the SVG code and replace it in your demo

Example 1: The App Landing demo

We are going to edit one of the icons that are rotating around the mobile image.

The first step is to find the element. We always recommend using Elementor Navigator when editing your demo. It will make your work much easier.

Using the navigator here is the Simple SVG widget that contains the SVG code:

You need to save this code as an SVG formatted file. You can use a free online tool like this:

Paste the code, and save it as an SVG file then open your file in your editing software. We will use the Adobe Illustrator for editing.

Here we have replaced one of the shapes with a new one:

Now, all we need to do is to export the inline code and replace it in the demo. There is a common issue in this step. You may see that the resulting shape does not have the same size as the original. To ensure that your edited shape keeps the same dimensions, please do the following steps in Adobe Illustrator to export the code:

  • Select all (Ctrl + A) and Object > Path > Outline Stroke
  • File > Export As
    • Make sure the “ Use Artboards” is checked.
    • Set a name for your file and set "Save as file" to SVG
  • Click "Export" 
  • Use the following options:
    • Styling: Internal CSS
    • Font: Convert to outline
    • Image: Preserve
    • Decimal: 4
    • Minify: Checked
    • Responsive: Unchecked

You will get an SVG file as a result which you can get its inline SVG code using the first tool mentioned in this article.

Go ahead and replace it in your demo and we are done. Here is the final result in the demo:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.