I have been successful in creating an SVG that animates the drawing of the image outline (the color fills in instantly at the end). Completely separately, I have been successful in performing the coloring in effect, but in this case the image outline is NOT drawn out first but rather the outline appears instantly at the end of the animation sequence, after the coloring in effect is complete.
I've been using InkScape to import the original PNG, using the "Trace Bitmap" tool to convert from bitmap to vector paths, and then have used Sublime Text 3 to manually remove unnecessary layers that the tool generated and to rearrange the letters to write from left to right (the original paths generated by the tool had the letters drawn in a random order).
I've attached 2 files for each of the two cases above. If you actually look at the SVG code (e.g., in Sublime Text 3), the files are exactly the same except the second file has an additional container (<g>) at the bottom that has the code for the coloring in effect.
I just can't figure out why the outline is no longer drawing in the second file even though the code is right there... I've looked through all of the forums and haven't found anyone who has described this exact problem. Any advice?
Here you go! Your path around the outside did not have weighting so was basically not drawing anything. Made that a 1 point line and matched it up colour wise so the path you drew basically became a traced outline. Then added a transparent path over the top after that to reveal the actual image.
This is excellent; really appreciate you taking the time to help!
A quick follow-up, conceptual question: I now understand that the outline wasn't drawing because the outside did not have a weighting. However, in the first file I attached ("Amazon LogoOutline DrawnNO Coloring Effect"), the outline <path> similarly does not have a weighting yet it nevertheless draws the outline in that case. This seems inconsistent to me though perhaps I am missing something.
Any thoughts as to why that is the case?
Thank you!
Kyle
Barry Radford
On
Tue, 3 May, 2016 at 5:28 PM
Kyle, looking at it again I am not sure it had anything to do with that line weighting as If I strip out your over layer your original image and tidy up the bottom layer a faint line still appears because while you path does not have a weighting it does go over the image itself so reveals a thin part of that. I did a lot of layer tidying in Adobe Illustrator when I did my version and it seems that solved the issue more that adding the weight to path.
I have been trying to draw the outline of a custom object and THEN have the hand perform the coloring in effect. I am familiar with the article on the topic of performing the coloring in effect (it's very helpful!): http://help.videoscribe.co/support/solutions/articles/1000033717-fill-an-image-with-colour-using-the
I have been successful in creating an SVG that animates the drawing of the image outline (the color fills in instantly at the end). Completely separately, I have been successful in performing the coloring in effect, but in this case the image outline is NOT drawn out first but rather the outline appears instantly at the end of the animation sequence, after the coloring in effect is complete.
I've been using InkScape to import the original PNG, using the "Trace Bitmap" tool to convert from bitmap to vector paths, and then have used Sublime Text 3 to manually remove unnecessary layers that the tool generated and to rearrange the letters to write from left to right (the original paths generated by the tool had the letters drawn in a random order).
I've attached 2 files for each of the two cases above. If you actually look at the SVG code (e.g., in Sublime Text 3), the files are exactly the same except the second file has an additional container (<g>) at the bottom that has the code for the coloring in effect.
I just can't figure out why the outline is no longer drawing in the second file even though the code is right there... I've looked through all of the forums and haven't found anyone who has described this exact problem. Any advice?
Thank you!
Kyle,
Here you go! Your path around the outside did not have weighting so was basically not drawing anything. Made that a 1 point line and matched it up colour wise so the path you drew basically became a traced outline. Then added a transparent path over the top after that to reveal the actual image.
Cheers
Barry
Barry,
This is excellent; really appreciate you taking the time to help!
A quick follow-up, conceptual question: I now understand that the outline wasn't drawing because the outside did not have a weighting. However, in the first file I attached ("Amazon LogoOutline DrawnNO Coloring Effect"), the outline <path> similarly does not have a weighting yet it nevertheless draws the outline in that case. This seems inconsistent to me though perhaps I am missing something.
Any thoughts as to why that is the case?
Thank you!
Kyle
Kyle, looking at it again I am not sure it had anything to do with that line weighting as If I strip out your over layer your original image and tidy up the bottom layer a faint line still appears because while you path does not have a weighting it does go over the image itself so reveals a thin part of that. I did a lot of layer tidying in Adobe Illustrator when I did my version and it seems that solved the issue more that adding the weight to path.
Layers in your version
Layers in my version