Jump to content


Path channels instead of stroke-width on path

Moderator Tag

Recommended Posts

I'm having to work with huge collections of simple line-art SVGs and set up an app that will find all the various elements of the SVG (line, path, rect, etc), add drawSVG to them and export out to video.


There's an entire folder where the artist decided to use paths with no stroke-width but, instead, used fills between adjacent paths. Forms little 4px channels where there should be 4px stroke-width on a single line.


But, in most of the other folders in the same collection, the artist used paths with stroke-widths as you would expect.


Referencing the Codepen, the first 2 SVGs that appear have lines/paths with strokes and the next 2 use no-stroke lines/paths with fill in-between as mentioned. You can see that the last 2 are like, "hey, there are no lines to draw here, move along!"


The other trick is that I have to be able to do this programmatically - won't know if one of these is being loaded. I could check for paths with no stroke-width, etc., but, man! Welcome to the world of high inconsistency.


Does anyone know of a way to detect and hack one of these so that it draws in/out?

See the Pen XKaWbV by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Have you tried just checking if the attribute exists using getAttribute()?


And then check if its length is 0, and if so,  then add the stroke-width attribute.


You cant really use CSS to define stroke-width, since that might fail in in some Modern Browsers if the actually stroke-width attribute is not present on the tag when trying to animate it.


Kind of like doing this check before you run any of your GSAP code.



Link to comment
Share on other sites

Thanks, Jonathan. If I add the stroke-width attribute, the paths surrounding the channel I mentioned above just gets surrounded with thicker path lines. You can see what I'm talking about here where I manually added stroke-width to the group surrounding the paths, etc. I could go in and remove all the fills but then you just get a hollow channel.


See the Pen XKaWbV by swampthang (@swampthang) on CodePen


I think for now I might push back on these particular SVGs. ;-)

Link to comment
Share on other sites

I'll respond to your PM later...
I've been working on a similar problem. I have to programmatically convert vectors used for CNC, to vectors that can be used for graphics. The problem is that the boundaries of a shape are not clearly defined. You can't tell where one shape ends and the next one begins, so I had to come up with a way to detect shapes from a set of points. I eventually came up with a pretty complicated solution for figuring this out. Let me just say that you do not want to go down that route if you don't have to.


I first convert the vector outlines to a raster image that is aliased. I then use canvas to do a bunch of flood fills to detect the outer and inner path boundaries of a shape. Once I have the shape filled, I convert those pixel values to vectors using a marching squares algorithm.


It works, but like I said, it's really complicated!


If you're curious, here's an early prototype of the flood fill algorithm I ended up using.

See the Pen e66092da06a11cffa0b9c9b395c5d42f?editors=0010 by osublake (@osublake) on CodePen


Link to comment
Share on other sites

Wow, Blake! I just now saw this. Not sure how I missed your post. Always like seeing what you have to say. I looked over that Codepen and man, that makes my stomach hurt ;-)


You're smarter than the average bear, that's for sure. I bookmarked the wiki links to floods fills and marching squares. Hehe, for now, I'm just gonna push back on the art. :-)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.