Imported SVG shows black fill instead of colour

  • Hello, 


    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:

    http://help.videoscribe.co/support/discussions/topics/1000029117


    I have attached both the AI and SVG files, and also a screen recording of Videoscribe drawing the shape.


    Thanks in advance!

    Scott

    mov
    (750 KB)
    ai
    (644 KB)
    svg
    (783 Bytes)
  • I believe you are using Adobe Creative Cloud which saves SVGs in a slightly different format than older versions.

    I just opened and resaved it in CS4 using adobe CEF and SVG 1.1 settings and the resulting SVG works fine in  videoscribe.

    I compared the CC SVG file with the CS4 SVG file and there is a difference in the way the stroke and fill information is recorded. Videoscribe doesn't recognize the format in your SVG file.

    You have several options:
    1) If you have an older version of Illustrator (probably CS6 or older) or inkscape (free at inkscape.org), then using that version to make your SVGs may be the simplest solution.

    2) You MIGHT be able to find different setting when saving the SVG in CC that will solve the problem or

    3) You MIGHT be able to save the AI file as an older version like CS4 then close it and re-open it and then save the SVG (I don't know if that will work)

    4) You could do all your work in CC then just open and resave your SVGs  in inkscape to rewrite the SVG code.


    -Mike (videoscribe user)

     

  • Hi Mike, 


    Thanks for your reply and suggestions, much appreciated. Yes you're right, I'm using CC 2015 at work but I have an older version of Illustrator at home and am just away to download Inkscape. I'll also have a look at the save settings in CC 2015 to see if there are any SVG save options that will work. I'll let you know how I get on.


    Best


    Scott

  • If you are using Illustrator CC 2015 use the following save settings and your SVGs will work normally in VideoScribe:



    The main setting to look out for is the CSS Properties in the Advanced section. This should be set to either Style Attributes or Presentation Attributes.
  • Hi Matthew, 


    Works perfectly, thanks for your help!

    Best


    Scott

  • Thanks guys, this just solved the same issue for me!

  • Customer support might want to add the same information and screenshot to the INSTANT ANSWER that explains how to make SVGs: create-your-own-images

    -Mike (videoscribe user)

     

  • Thanks Matthew!  I was having the same issue and it took me a couple of hours of searching before finding this.  I agree with Mike.  It would be great is Sparkol added it to the create-your-own-images.


    Thanks again.


    Randy

  • Hi Randy, glad this helped.

    We have updated the Instant Answer with a link to a Blog post which contains this.

    It is a really great post which shows the best way to create SVG files.


  • Matthew you are a genius!!  This issue has been messing me up all day!

     Thanks for figuring this out!

  • thank you! had the same problem. works now :)


  • This works. Thanks!

  • Is there a way to get these settings when extracting an SVG in Photoshop? I can't get Illustrator on my work computer ($$) and can't get the free program since it has not been vetted by IT...


    Thanks!

  •   Possibly...


    what version of photoshop?

    Have you tried it?

    Are you experiencing a problem with your SVG or just asking a general question?

    can you take a screenshot of the Photoshop SVG export/save options screen and attach it here?

    -Mike (videoscribe user)

  • Photoshop CC.  I am also having the issue with SVG Output from Photoshop having a black fill.  I see that there is a way to fix that in Illustrator, but I don't see that we have a settings function in Photoshop for SVG graphics (the only way we get SVG graphics in Photoshop is by Extracting assets).  When I extract assets, this is the dialog box I get (this has the dropdown option to select SVG, but there is no place the select the settings for the SVG - the settings button at the bottom is for asset resolutions): 


Login to post a comment