Imported SVG shows black fill instead of colour

  • Hi,

    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.
    or
    2) using Adobe illustrator if you have that. (I'm pretty sure you don't have that)
    or
    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.
    or
    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:



  • Great work! Thanks for sharing your results.


    do you need to add the stroke-width too ?


    -Mike (videoscribe user)

     

  • 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.


    -Heidi


  • I have a similar problem with the attached files. I have a strange black fill. Resave the SVG  in inkscape didn't work. Can anybody help?

     

    svg
    (343 KB)
  • Your SVG uses a STYLE tag that videoscribe does not recognize so the fill color defaults to black.

    The same thing happens when I open it in illustrator version CS4

    You probably either need to edit your SVG file in a text editor as described earlier in this thread.
    or use inkscape 0.48.5.  If you open the SVG in inkscape 0.48.5 and the fills are he correct color, then just resave the SVG. If you open it in inkscape 0.48.5 and the fills are black.. then fix the colors and save the SVG.

    some of the other suggestions in this thread might also work.

    -Mike (videoscribe user)



     

  • I'm working in Corel Draw and experiencing the same problems as the opening poster?


    Any ideas?


    Have x3 and x6 versions

  • Hi,

    1) Please attach the SVG with the problem, if you would like help or feedback on it. 
    Often when someone says it is the same problem, it is a different problem with similar symptoms.


    2) it may help to specifically describe the way the image looks in coreldraw compared to the way it looks in videoscribe
    3) do your best to match the illustrator save options and all other previously mentioned tips.
    4) the older version might be preferable to the newer version for the purposes of making SVGs for videoscribe
    5) if all else fails, just use inkscape version 0.48 which is free at inkscape.org

     


    -Mike (videoscribe user)

  • File attached.


    Black version uploads perfectly. Changing the colour to Pink, as per the attached still displays in black

    svg

  •  Hi,
    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).

    image



    (obviously, moving forward, it would be best if Videoscribe was updated to understand CSS, but currently it does not.)


    Possible solutions:
    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:

    image






    -Mike (videoscribe user)

    svg
  • Hello,

    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?

    Result SVG.png
    (26.2 KB)
  • Hi Kritika,


    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!

Login to post a comment