Back to Troubleshooting Guides

Troubleshooting

Responsiveness Issues with SVGs

This guide applies to:

  • Basic
  • Professional

Introduction

If you happen to upload an SVG image for your interactive image, you will find that you run into some strange issues regarding responsiveness. We would have to re-configure the plugin to support this file format; the plugin uses SVGs within the code itself to display hotspots.

However, we will go over the following responsiveness issues with SVGs that can occur as a result of this.

What is an SVG image?

Possible Responsiveness Issues

If an SVG image is used for the interactive image, you may witness delays with resizing. Browsers fire off resize events continuously while the window is being resized. The browser would most likely end up locking if Draw Attention were to calculate the resize on each event.

Draw Attention does not support SVGs for the main interactive image.

Upload Image in a Different Format

At this time, you’ll need to use different image file types for your interactive images to prevent responsiveness issues with SVGs.

We recommend converting your image to another file type that is compatible with Draw Attention, such as:

  • JPG
  • PNG
  • WEBP
Upload JPG, PNG, or WEBP images for your interactive image to avoid responsiveness issues.

Interested in learning what else Draw Attention can do? Please take a look at our interactive image editor guide to go over some nifty settings.

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides