In the following few days, I will (hopefully) explore how to make interactive and animated SVG parts. There are a few goals behind this:
- To understand d3.js, one has to understand SVG first.
- I want to create a unique progress spinner component.
Sadly, Inkscape does not seem to be a good tool for automated processing. Anyway, let me document the manual process first, and worry about automation later.
Converting text to paths
Select all objects, and select Path > Object to Path.
Removing unwanted groups
Having a hierarchy in the SVG actually makes sense. But sometimes there are redundant groups that represent concepts like additional affine transformations. They could just be absorbed to the object data.
To do so, go to Object > Objects, and select any group that does not make sense and select Ungroup in the context menu.
Sometimes a group refuses to be ungrouped, because it is actually a “Text group”. I do not know what this means, but apparently toggling the “T” column, which presumably means “Text”, fixes this issue.
Exporting
There are a few different “SVG” formats in Inkscape. Make sure to save the modified version as an “optimized SVG”.
There are plethora of options here, but they are all quite straightforward.
Result
The WordPress editor is pretty good at eating inline SVGs and it also blocks SVG uploading for security reasons. For now I just stick to adding this inline SVG in the raw HTML editor.
It can also be noted that the “optimized SVG file” actually contained redundant parts:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="64mm" height="64mm" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m47.911 58.285s-7.6351 5.3341-17.99 5.3341c-6.4846 0-12.446-0.20918-17.676-0.62754
0.31377-2.9285 0.52295-5.9616 0.52295-9.5177v-52.504c4.3928-0.31377 9.0994-0.52295 14.015-0.52295
13.597 0 28.553 8.5764 28.553 31.586 0 14.015-2.9285 19.872-7.4259 26.252z" fill="#378aba"
style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
<path d="m32.585 22.364 6.1468 0.254 0.762 4.1148 3.9624 0.254c0.6096-2.9972 0.9652-6.096
0.9652-9.144l-0.508-0.508h-24.028l-0.254 2.9464c1.1684 0.508 2.4384 0.9652 3.81 1.27v25.806c-1.3716
0.3048-2.6416 0.762-3.81 1.27v2.7432h18.288l0.254-2.7432-6.096-0.508c0.4064-2.3368 0.508-4.6228
0.508-7.1628v-4.318l8.89 0.9652c0.254-2.2352 0.254-4.0132 0-6.2484l-8.89 0.9652z" fill="#fff"/>
<path d="m47.911 9.4084c3.3178 7.3867 5.4615 16.038 5.4615 24.437 0 9.1575-2.1438 17.05-5.4615
24.437l4.0834 0.50594c5.2063-7.3867 8.0647-15.785 8.0647-24.943
0-8.3986-2.8584-17.556-8.0647-24.943z"/>
<path d="m12.769 58.663v-49.742h-6.0685v49.742z"/>
</g>
</svg>The part about font styles is absolutely useless since there are no text elements in this SVG.