Js-beautify: Fails to format SVG files properly

Created on 14 Sep 2016  路  3Comments  路  Source: beautify-web/js-beautify

Description

The library doesn't handle SVG files properly - it does something but not what it should.

Input

This code before beautification (I've simplified it and messed the indentation intentionally; it was the same with the original / full markup):

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
                    <rect id="XMLID_20_" x="-7" 
                          class="st0" 
                          width="49" height="36"/>
</svg>

Expected Output

I'm not exactly sure what it should look like. Maybe like that if we allow / retain line breaks between tag attributes.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
     <rect id="XMLID_20_" x="-7" 
           class="st0"
           width="49" height="36"/>
</svg>

...or if they should be removed

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
     <rect id="XMLID_20_" x="-7" class="st0" width="49" height="36"/>
</svg>

Actual Output

The code actually looked like this after beautification:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
                    <rect id="XMLID_20_" x="-7" 
                          class="st0" 
                          width="49" height="36"/>
</svg>

Note that only the one line break in the opening <svg> tag (between attributes) was removed (didn't do anything about line breaks in <rect>). Did not change indentations at all.

Environment

OS: Windows 10 Pro 64 bit

Settings

Default.

Additional comment

I've tried to change the file extension to XML and run beautify again - this was my workaround until recent - but the result was the same as shown above (it worked properly in the past). It appears there's something wrong with XML beautification (I'm assuming the same part of the library is handling SVG and XML).

Previously reported in https://github.com/brackets-beautify/brackets-beautify/issues/223

fixed? bug

Most helpful comment

Any progress? How can i beautify inlined svg?

All 3 comments

This doesn't get formatted at all: <svg><defs><path></path></defs></svg>

Any progress? How can i beautify inlined svg?

This appears to have been resolved by v1.8.0-rc14. I'm writing tests for it and will file a PR by the end of the hour.

Was this page helpful?
0 / 5 - 0 ratings