Trim Decimal Places from Numbers in a Text Editor - svg

Question

I have a set of SVG definition exported from Inkspace and as anyone who has done this themselves will know the resulting definition often contains far more accuracy that is actually justified. For example for a 32 x32 icon definition shown below, Inkspace has generated 6 (or more!) decimal places of accuracy per pixel. Now I know that means it will scale but in my case I would rather save space in my app which requires input of hundreds of such icon definitions.
<svg width="32" height="32"><path d="M 14.576172 5.453125 L 13.78125 8.8222656 L 12.464844 9.3691406 L 9.5625 7.5898438 L 7.5898438 9.5351562 L 9.3691406 12.576172 L 8.8222656 13.78125 L 5.4785156 14.630859 L 5.4785156 17.369141 L 8.8496094 18.246094 L 9.3691406 19.507812 L 7.5625 22.464844 L 9.5351562 24.410156 L 12.548828 22.658203 L 13.808594 23.177734 L 14.603516 26.494141 L 17.396484 26.521484 L 18.191406 23.177734 L 19.505859 22.658203 L 22.410156 24.410156 L 24.355469 22.410156 L 22.658203 19.451172 L 23.150391 18.191406 L 26.492188 17.369141 L 26.492188 14.630859 L 23.123047 13.726562 L 22.630859 12.521484 L 24.410156 9.5351562 L 22.410156 7.5898438 L 19.451172 9.3417969 L 18.246094 8.8222656 L 17.396484 5.453125 L 14.576172 5.453125 z M 15.984375 12.082031 A 3.9078221 3.9078221 0 0 1 19.892578 15.988281 A 3.9078221 3.9078221 0 0 1 15.984375 19.896484 A 3.9078221 3.9078221 0 0 1 12.078125 15.988281 A 3.9078221 3.9078221 0 0 1 15.984375 12.082031 Z" fill="#f9f9f9" /></svg>
So my question is how can I trim the definitions using a text editor to say 2 decimal places.
I have found that by using TextWrangler with the following grep search and replace string
(\.[0-9][0-9])([0-9][0-9][0-9][0-9][0-9][0-9])
\1
that I can search for all 6 decimal places strings and replace them with 2 decimal places. Then I can change the search and replace to
(\.[0-9][0-9])([0-9][0-9][0-9][0-9][0-9])
\1
and then to
(\.[0-9][0-9])([0-9][0-9][0-9][0-9])
\1
and finally to
(\.[0-9][0-9])([0-9][0-9][0-9])
\1
and this works.
However if someone with slightly (or a lot) more brain pixels than me, could show me how to do all of the above with just one search and replace operation, I would be very happy.

Answer 1

To remove the unwanted precision from the (bash or shell) command line, try:
sed -E 's/([[:digit:]]\.[[:digit:]]{2})[[:digit:]]+/\1/g' file.svg
To change the file in place (Linux),
sed -i.bak -E 's/([[:digit:]]\.[[:digit:]]{2})[[:digit:]]+/\1/g' file.svg
Or OSX:
sed -i .bak -E 's/([[:digit:]]\.[[:digit:]]{2})[[:digit:]]+/\1/g' file.svg
How it works
This looks for any place where there is a digit, followed by a period, followed by two digits, followed by some number of more digits:
([[:digit:]]\.[[:digit:]]{2})[[:digit:]]+
The first digit, period, and two following digits are in parens. This saves them to group 1 which we use as the replacement text.
Example
Your input file:
$ cat >file.svg
<svg width="32" height="32"><path d="M 14.576172 5.453125 L 13.78125 8.8222656 L 12.464844 9.3691406 L 9.5625 7.5898438 L 7.5898438 9.5351562 L 9.3691406 12.576172 L 8.8222656 13.78125 L 5.4785156 14.630859 L 5.4785156 17.369141 L 8.8496094 18.246094 L 9.3691406 19.507812 L 7.5625 22.464844 L 9.5351562 24.410156 L 12.548828 22.658203 L 13.808594 23.177734 L 14.603516 26.494141 L 17.396484 26.521484 L 18.191406 23.177734 L 19.505859 22.658203 L 22.410156 24.410156 L 24.355469 22.410156 L 22.658203 19.451172 L 23.150391 18.191406 L 26.492188 17.369141 L 26.492188 14.630859 L 23.123047 13.726562 L 22.630859 12.521484 L 24.410156 9.5351562 L 22.410156 7.5898438 L 19.451172 9.3417969 L 18.246094 8.8222656 L 17.396484 5.453125 L 14.576172 5.453125 z M 15.984375 12.082031 A 3.9078221 3.9078221 0 0 1 19.892578 15.988281 A 3.9078221 3.9078221 0 0 1 15.984375 19.896484 A 3.9078221 3.9078221 0 0 1 12.078125 15.988281 A 3.9078221 3.9078221 0 0 1 15.984375 12.082031 Z" fill="#f9f9f9" /></svg>
Our command:
$ sed -E 's/([[:digit:]]\.[[:digit:]]{2})[[:digit:]]+/\1/g' file.svg
<svg width="32" height="32"><path d="M 14.57 5.45 L 13.78 8.82 L 12.46 9.36 L 9.56 7.58 L 7.58 9.53 L 9.36 12.57 L 8.82 13.78 L 5.47 14.63 L 5.47 17.36 L 8.84 18.24 L 9.36 19.50 L 7.56 22.46 L 9.53 24.41 L 12.54 22.65 L 13.80 23.17 L 14.60 26.49 L 17.39 26.52 L 18.19 23.17 L 19.50 22.65 L 22.41 24.41 L 24.35 22.41 L 22.65 19.45 L 23.15 18.19 L 26.49 17.36 L 26.49 14.63 L 23.12 13.72 L 22.63 12.52 L 24.41 9.53 L 22.41 7.58 L 19.45 9.34 L 18.24 8.82 L 17.39 5.45 L 14.57 5.45 z M 15.98 12.08 A 3.90 3.90 0 0 1 19.89 15.98 A 3.90 3.90 0 0 1 15.98 19.89 A 3.90 3.90 0 0 1 12.07 15.98 A 3.90 3.90 0 0 1 15.98 12.08 Z" fill="#f9f9f9" /></svg>

Answer 2

I'm very helpful in optimizing svg files, drawn in vector editors,
a utility made by Peter Collingridge - SVG Editor
The interface is intuitive, almost immediately you start working.
The results are good:
Reduces the size of files almost several times
Removes all the service information left after Inkscape
There is a choice of the number of decimal digits

Answer 3

Set precision in Inkscape:
Newer version: Menubar | Edit | Preferences | Input/Output | SVG Output | Numbers
Older version: Menubar | Edit | Inkscape Preferences | SVG Output | Numbers

Answer 4

To trim the definitions using a text editor to x decimal places you can simply use the Regular Expression Search Mode of Notepad++ :
Open Find and Replace With Ctrl+H
Change the search mode to Regular Expression
Put (\d+\.\d{x})\d* in the Find What ( Replace x by the number of digits that you want)
Put \1 in Replace With
Press Replace All
Result With your Example :
Before :
After :
You can download the latest version of Notepad++ here.

Answer 5

Using a RegEx approach that cuts all numbers to two decimal places is pretty naive. Not all decimals are the same. Consider for example the following matrix transform:
transform="matrix(0.999848,0.017452,-0.034905,0.999543,-4.0838,-3.8401)"
Cutting these numbers to two decimal places changes the second number by 41%. Is that significant? Yes, in fact you can use it for a nice embossing effect:
<svg viewBox="0 0 20 20" width="100" height="100">
<text x="7" y="22" style="font-size:20;fill:#000000"
transform="matrix(0.999848,0.017452,-0.034905,0.999543,-4.0838,-3.8401)">A</text>
<text x="7" y="22" style="font-size:20;fill:#ffffff;opacity:0.8"
transform="matrix(0.99,0.01,-0.03,0.99,-4.08,-3.84)">A</text>
</svg>
This is why Inkscape uses the term "precision" in its settings and rounds to a fixed number of significant digits (123.4, 0.01234,...)
The second problem is that you might have a scaling transformation somewhere in your SVG. Did you see in the above snippet that the given size of the rectangle is scaled with a factor 5? It is implicit in the viewBox, ẁidth and height attributes. What if the scaling had been not 5, but 1000? And yes, I have seen these kind of relations in the wild. Especially if the grafic has been produced with Inkscape.
So: handle with care.

Answer 6

The answer depends how you insert the content into your files.
If you manually copy the a .svg file's content and have to manually use the steps you did above to minify the HTML, then there's definitely a better way: store your main .svgs in one folder called svgs, and call a script that minifies those .svgs into another folder called svgsminified. That way everytime you manually copy the markup, you would use the minified version in svgsminified folder.
If your IDE adds the .svg file's markup for you, then hopefully there's a scripting function in the IDE that allows you to call an external script to pre-minify the incoming <svg> markup .
If you're using Powershell (which works on *nix and Windows), a minifying script to minify all .svgs in a folder would look something like:
# All .svgs in $svg_dir will be minified into $svg_minified_dir
$svg_dir = 'D:/svg'
$svg_minified_dir = 'D:/svgs_minified'
Get-ChildItem $svg_dir -Filter *.svg | ForEach-Object {
$svg_content = Get-Content $_.FullName -Raw
$svg_minified = $svg_content -replace '(\.[0-9]{2})([0-9]{1,5})', '${1}'
$svg_minified.Trim() | Out-File "$svg_minified_dir/$($_.Name)" -Encoding utf8 -NoNewline
}

Answer 7

Given an svg with :
<path id="hair" d="m208 14.2c-61.3 0-111 49.7-111 111 0 61.3 49.7 111 111 111 61.3 0 111-49.7 111-111-0.1-61.2-49.7-111-111-111z"/>
To round to closest integer, use :
perl -i -pe 's/(\d*\.\d*)/int($1+0.5)/ge' file
Results:
<path id="hair" d="m208 14c-61 0-111 50-111 111 0 61 50 111 111 111 61 0 111-50 111-111-0-61-50-111-111-111z"/>
Thanks to https://askubuntu.com/a/601190/158008