I wonder if someone can help with a problem I'm experiencing when importing an SVG created in Illustrator. I'm currently using the trial version of Videoscribe with a view to using the Pro version for a few explainer videos in the near future. As a test, I created a simple blob shape in Illustrator using the pen tool (Layer 1: black stroke, no fill. Layer 2: no stroke, yellow fill) and exported as SVG.
When I import the SVG in to Videoscribe, the thumbnail shows a black shape rather than the colour of the original file. When previewing, the stroke is drawn as a thin line rather than a stroke. Videoscribe then appears to draw a second outline (of Layer 2) and this is then filled with black. I've watched the tutorials about creating SVG files for Videoscribe, but wonder if I'm missing a setting..
I did come across this post on the forum which seems to mention something similiar to what I'm experiencing:
I have attached both the AI and SVG files, and also a screen recording of Videoscribe drawing the shape.
Thanks in advance!
Sparkol may have the current version of photoshop, and maybe they will have some information or suggestions to post here.
I don't think that any guides or testing have been provided for photoshop CC SVGs.
I do not have access to that program in order to do testing.
It LOOKS as though the gear/cog in the upper right and the SETTINGS button in the lower left open the same menu for choosing image quality of embedded images, so those won't help as you have already concluded.
I believe pretty strongly that Photoshop CC does NOT currently provide options that will allow you to consistently save SVGs that will work well in videoscribe (September 2016) unless there is some option somewhere that makes the pen and pencil tools work the way they used to work before 2013.
Your best options are probably:
1) using the OLD inkscape version 0.48.5 (free at inkscape.org) which is known to work well with videoscribe, I strongly recommend this as the easiest and cheapest solution. If you have to get it approved by management or IT department, I would recommend doing that.
2) using Adobe illustrator if you have that. (I'm pretty sure you don't have that)
3) running your photoshop CC SVGs through some kind of SVG optimizer that cleans up SVGs for web use and reduces the file size. Something like that may strip out the extra data that causes problems in videoscribe.
4) try editing your SVG in a text editor (like notepad or wordpad) if you can figure out what parts of the code need to be removed to fix the problem.
related thread:Making SVG Images Draw Well (2015 update)
-Mike (videoscribe user)
Hacking the HTML worked. Thanks!
Apparently VideoScribe does not like CSS? So here is how I hacked the HTML:
to make it work:
Not sure, I just exported an SVG from videoscribe and compared the code. The videoscribe svg code did not have a stroke-width. I suppose I could add it though.
I'm working in Corel Draw and experiencing the same problems as the opening poster?
Have x3 and x6 versions
-Mike (videoscribe user)
Black version uploads perfectly. Changing the colour to Pink, as per the attached still displays in black
You were right, it IS the same problem (color fills appearing black)!
I think videoscribe does not recognize the use of CSS (custom style sheets and the "style" tag) to specify the correct color so videoscribe defaults to black (a value of 000000).
1) There may be save settings in Coreldraw that allow you to save the SVG for compatibility with older programs, without using a style tag... but I don't have coreldraw to test that.
2) if you used corel x6 for this you could try corel x3 in case it saves differently
3) it's probably not worth manually editing multiple SVGs in a text editor although it is possible.
4) you could use inkscape 0.48.5 (free at inkscape.org) to make your SVGs or just to open and then save them again to remove the css
Attached at the bottom of this reply is your SVG simply opened and resaved in illustrator cs4 using these save settings:
I am using Pocket SVG framework and I am showing SVG on view. But SVG is showing in black color filled. Can you tell me the reason behind it?
Is the PNG you attached an image of your SVG in VideoScribe?
Are you able to attach the SVG image?
Here are the save settings for SVGs for them to work in colour using Illustrator 2020.
This is working for me so should hopefully work for everyone else.
When you save as an SVG, go to more options then under CSS properties change it from style elements to presentation attributes.
I'm using a mac so this may be a little different for other operating systems.
I would uncheck 'responsive' as well otherwise parts of the colour fills will show when strokes are drawn - settings can be seen on the create your own images help page!