We have seen this before wqhen importing SVGs. There is usually some extra information imported that looks invisible in your SVG editor.
1. Open the SVG in your editor and use 'select all' to see if there's anything else there
2. If you're still stuck, upload your SVG here for us to take a look at
HI Did a solution to this ever get discovered. I have multiple svg's to import and each one has a black border that I cannot seem to select or erase. Would be a life saver to discover the answer. Thanks!
1. Open the SVG in your editor (inkscape or illustrator) and use 'select all' to see if there's anything else there. delete the square background item
2. If you're still stuck, upload your SVG here for us to take a look at.
in version 1.3.26 there was a setting called "draw without strokes" that could sometimes remove an extra outline I believe. However I think that feature was one of the features left out of Version 2.0 (EDIT: Joe says that the setting is now called "only draw strokes?" in version 2.0 and is located in image properties menu. I tested both the 2.0 version and the 1.3.26 version on an SVG with a white background and unfortunately the outline was not removed in either case. So editing the SVG is probably the best course of action.)
-Mike (videoscribe user)
HI Mike Thanks for your answer. From the leads you pointed me to, I discovered that when I was importing the file from iDraw there was an opt out box ticked that said "Include background". I unticked it and happy days!! Thanks for the lead,
Not so much 'left out' as 'not needed' in version 2 ;)
Is that functionality somewhere else in another setting now?
Otherwise, from a user standpoint, it is just one more example of a useful feature that has been taken away. (especially useful for those users who don't know how to edit SVGs.)
Hi Mike, the option is called 'Only Draw Strokes?' which is located in the image properties.
There is a list of feature requests being considered and I believe some are requests for older features to return.
The more popular the request is the higher the consideration will be.
I was having this exact problem and may have stumbled onto a workaround:
If a perfect rectangle is the back-most object, it seems to get outlined in black by VideoScribe. I simple cut a corner off the rectangle and the black line went away! Can someone else confirm this workaround?
-Mike (videoscribe user)
The outline occurs because some graphics programs automatically add a background rectangle with white fill and no outline. You can remove this by opening the svg file using a text editor such as NotePad. The start of the file will be something like below. I've highlighted the problematic line. Just delete this line, save the file, and import it as usual.
-------------Begin SVG file ------------
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="cvpage1_top" width="612px" height="792px" transform="translate(0,0)">
<rect x="0px" y="0px" width="612px" height="792px" fill="#FFFFFF" stroke="none" />
<path d="M 387.792 419.01 C 384.9
Carl, are you saying the problem rectangle will not be visible in Adobe Illustrator's Layer list when opening the SVG? That seems really strange.
Also, this does not match my experience. I created a graphic and added a rectangle, as the back object, to mask another element on the canvas. This rectangle received a black line in VideoScribe even though it was manually added and did not reach the edges of the file.
Carl's comment does not apply to illustrator, but may apply to some
simpler vector apps like iDraw which include a background layer by
However, as mentioned earlier in the thread, iDraw has an option called "include background" which can be unticked. Other apps may have a similar option.
And just to clarify for everyone reading, there are two issues being covered in this thread (both of which result from a bug that causes videoscribe to draw a stroked path around some perfectly rectangular unstroked paths):
One issue is that some apps may include a rectangular background where
the user does not want or expect one (resulting in a rectangular outline
appearing in videoscribe). The solutions are to change the app options
to prevent the rectangular background, or to delete the rectangle from
the SVG file using a text editor like notepad.
2) The second issue is that some users want to have rectangular shapes of color with no strokes in their SVGs. The solutions include either rounding the corners of the rectangle, or pulling out the anchor point handles so that the corners are not perfect 90 degree angles (the can be very close so that they still look like 90 degree angles), or replacing it with a circle, or otherwise altering the shape so it is not a perfect rectangle. there may be other solutions like rotating the rectangle slightly but I haven't tested them.
-Mike (videoscribe user)
I was also getting the black line around each one of my imported "rectangle" SVGs from Illustrator.
I remedy this issue by putting an outline that matched the body color/colour of my Illustrator elements. No border issues since.
2 people have this question