Lines of SVGs thicken when drawn

When VideoScribe has finished drawing an image the lines of the image can thicken and get darker. If you are creating your own SVG images, this article will give you tips on how to reduce this. 

Symptoms

When VideoScribe has finished drawing an imported image the lines of the image can thicken and get darker.

circle preview responsive checkedCause

The most common reason for this issue is due to the settings selected whilst creating and saving your SVG image.

Resolution

We follow a few simple guidelines when creating images for the library which ensures that we get great results. When you are creating your images please work within the following parameters:

Adjust the units and canvas size of your project

Make the units for your project pixels and set the artboard size to 1000 x 1000

Lines thicken canvas size

Adjust the stroke width

Ensure the numerical value for the width of your strokes are full values and not decimals e.g ‘4px’ instead of ‘4.234 px’.

circle pencil tool and stroke width AI

Ensure you have selected the correct SVG export options for your software

Adobe Illustrator

Make sure you use the below save settings if you are using Adobe Illustrator

Save your project to display the settings

  • SVG Profile: SVG 1.1 (A)
  • Fonts > Type: SVG (B)
  • Advanced Options > CSS Properties: Presentation Attributes (C)

Please note: Ensure the ‘Responsive’ box is not checked, checking this box will cause the strokes to enlarge after the Draw animation.

SVG Options ABC

circle preview responsice unchecked

Inkscape

Open your Document Properties

Inkscape Document Settings

Make sure that the Display (D) and Custom Size (E) units of measurement are set to pixels within the document properties. Also, make sure that the ‘Scale’ is set to 1 (F).

Inkscape DEF

If you have followed the advice in this article and are still having the same issue, please either post your SVG onto the community forum post Making SVG Images Draw Well or attach the image to a support ticket and the Customer Success team will take a look.