When I "Save As HTML5 Canvas" some of the paths are missing fillStyle and fill() commands or strokeStyle and stroke() commands. This means those shapes/paths don't render when the HTML is viewed in the browser.

Does anyone know why this is happening or how to fix it?

Thanks!

OK, I solved my own problem: Looking at the code for "Save As HTML 5 Canvas" (under "share\inkscape\extensions\ink2canvas_lib") I found that the exporter looks for the either fill or stroke style elements in the style attribute only. However, SVG allows fill or stroke to be in its own XML attribute. The exporter doesn't look into standalone XML attributes so the exporter fails for paths that don't have don't have the stroke or fill in the style attribute. For example, in the following SVG code the first one will work but the second one won't:

  <path d="m68.799 151.21h26.438v33.69h-26.438z" style="fill:#7b332d;stroke-width:9.9998"/>

  <path d="m68.799 151.21h26.438v33.69h-26.438z" fill:"#7b332d" style="stroke-width:9.9998"/>

A related bug has been filed here: https://gitlab.com/inkscape/extensions/-/issues/189 but you can fix SVGs by hand by moving the fill attribute to be be fill CSS style under the style attribute.

It's something that can be done in javascript by getElementsByTagname('*') in the svg , then examining for 'fill' attribute, and if exists using style.setProperty for that tag. 

However I wouldn't know how to do it in python.

This might do what you want in the short term

https://www.raincloud.co.uk/svg/fillStrokeToStyle/fillStrokeToStyle.html

It converts inline fill and stroke-width attributes to style='fill : rgb; stroke-width: thickness'

@inklinea Thank you for that tool! It does exactly what I need. I'm also a programmer, so I submitted a Pull Request to Scour (the library that Inkscape uses to write out optimized SVGs) to support this feature (Scour basically will do the same thing the web page does: convert attributes to style string, it just does it in Python since Inkscape likes Python.) If Scour approves the pull request, I can add the UI options to Inkscape to expose Scour's capabilities and we should be able to do it in Inkscape without a separate tool.

Thanks for your help!

Here's the pull request: https://github.com/scour-project/scour/pull/267

Glad it worked. I should have learnt how to use python a long time ago though.

I will probably change the webpage at some point to cover all of the presentation attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes

:)

I've updated the attribute to style converter to let you choose which attributes you want to convert. I have added all of the SVG presentation attributes.

https://www.raincloud.co.uk/svg/attributesToStyle/attributes2Style.html

Would you be able to give it a test ? - I will upload it to the Inkscape gallery for everyone if it works as I think it does :)

I've had a good read of the pull request looks good.

Hmm, well in an interesting development I have found that even though SVG2.0  presentation attributes can also be CSS properties, some require conversion first.

Specifically transform attributes, possibly by conversion to a matrix.

More work required :)

[edit] I've made a few adjustments, and put it on the Inkscape Gallery at https://inkscape.org/~bipper/%E2%98%85attributes2style