ivanceras / svgbob

Convert your ascii diagram scribbles into happy little SVG
http://ivanceras.github.io/svgbob-editor/
Apache License 2.0
3.83k stars 108 forks source link

Comment in style section is not a CSS comment #89

Closed kdheepak closed 1 year ago

kdheepak commented 2 years ago

I’m generating the following svg using this tool:

<svg xmlns="http://www.w3.org/2000/svg" width="472" height="432">
    <style>
        line, path, circle, rect, polygon{stroke:black;stroke-width:2;stroke-opacity:1;fill-opacity:1;stroke-linecap:round;stroke-linejoin:miter;}text{font-family:monospace;font-size:14px;}rect.backdrop{stroke:none;fill:transparent;}.broken{stroke-dasharray:8;}.filled{fill:black;}.bg_filled{fill:transparent;}.nofill{fill:transparent;}.end_marked_arrow{marker-end:url(#arrow);}.start_marked_arrow{marker-start:url(#arrow);}.end_marked_diamond{marker-end:url(#diamond);}.start_marked_diamond{marker-start:url(#diamond);}.end_marked_circle{marker-end:url(#circle);}.start_marked_circle{marker-start:url(#circle);}.end_marked_open_circle{marker-end:url(#open_circle);}.start_marked_open_circle{marker-start:url(#open_circle);}.end_marked_big_open_circle{marker-end:url(#big_open_circle);}.start_marked_big_open_circle{marker-start:url(#big_open_circle);}
        <!--separator-->

    </style>
    <defs>
        <marker id="arrow" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <polygon points="0,0 0,4 4,2 0,0"></polygon>
        </marker>
        <marker id="diamond" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
        </marker>
        <marker id="circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <circle cx="4" cy="4" r="2" class="filled"></circle>
        </marker>
        <marker id="open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <circle cx="4" cy="4" r="2" class="bg_filled"></circle>
        </marker>
        <marker id="big_open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <circle cx="4" cy="4" r="3" class="bg_filled"></circle>
        </marker>
    </defs>
    <rect class="backdrop" x="0" y="0" width="472" height="432"></rect>
    <text x="98" y="60" >1</text>
    <text x="226" y="60" >y12</text>
    <text x="370" y="60" >2</text>
    <text x="66" y="140" >y1</text>
    <text x="402" y="140" >y2</text>
    <text x="170" y="156" >y13</text>
    <line x1="16" y1="200" x2="72" y2="200" class="solid"></line>
    <line x1="408" y1="200" x2="464" y2="200" class="solid"></line>
    <line x1="32" y1="216" x2="56" y2="216" class="solid"></line>
    <line x1="424" y1="216" x2="448" y2="216" class="solid"></line>
    <line x1="40" y1="232" x2="48" y2="232" class="solid"></line>
    <text x="242" y="236" >3</text>
    <line x1="432" y1="232" x2="440" y2="232" class="solid"></line>
    <text x="258" y="316" >y3</text>
    <line x1="208" y1="376" x2="264" y2="376" class="solid"></line>
    <line x1="216" y1="392" x2="256" y2="392" class="solid"></line>
    <line x1="232" y1="408" x2="240" y2="408" class="solid"></line>
    <text x="274" y="156" >y23</text>
    <g>
        <line x1="92" y1="0" x2="92" y2="112" class="solid"></line>
        <line x1="44" y1="56" x2="92" y2="56" class="solid"></line>
        <line x1="44" y1="56" x2="44" y2="104" class="solid"></line>
        <line x1="92" y1="88" x2="108" y2="88" class="solid"></line>
        <line x1="108" y1="88" x2="132" y2="136" class="solid"></line>
        <line x1="188" y1="8" x2="284" y2="8" class="solid"></line>
        <line x1="188" y1="8" x2="188" y2="40" class="solid"></line>
        <line x1="284" y1="8" x2="284" y2="40" class="solid"></line>
        <line x1="92" y1="24" x2="188" y2="24" class="solid"></line>
        <line x1="188" y1="40" x2="284" y2="40" class="solid"></line>
        <line x1="380" y1="0" x2="380" y2="112" class="solid"></line>
        <line x1="284" y1="24" x2="380" y2="24" class="solid"></line>
        <line x1="380" y1="56" x2="436" y2="56" class="solid"></line>
        <line x1="436" y1="56" x2="436" y2="104" class="solid"></line>
        <line x1="364" y1="88" x2="380" y2="88" class="solid"></line>
        <line x1="364" y1="88" x2="340" y2="136" class="solid"></line>
        <path d="M 32,104 A 4,4 0,0,0 28,108" class="nofill"></path>
        <line x1="28" y1="108" x2="28" y2="148" class="solid"></line>
        <line x1="32" y1="104" x2="56" y2="104" class="solid"></line>
        <path d="M 56,104 A 4,4 0,0,1 60,108" class="nofill"></path>
        <line x1="60" y1="108" x2="60" y2="148" class="solid"></line>
        <path d="M 28,148 A 4,4 0,0,0 32,152" class="nofill"></path>
        <line x1="32" y1="152" x2="56" y2="152" class="solid"></line>
        <line x1="44" y1="152" x2="44" y2="192" class="solid"></line>
        <path d="M 60,148 A 4,4 0,0,1 56,152" class="nofill"></path>
        <path d="M 424,104 A 4,4 0,0,0 420,108" class="nofill"></path>
        <line x1="420" y1="108" x2="420" y2="148" class="solid"></line>
        <line x1="424" y1="104" x2="448" y2="104" class="solid"></line>
        <path d="M 448,104 A 4,4 0,0,1 452,108" class="nofill"></path>
        <line x1="452" y1="108" x2="452" y2="148" class="solid"></line>
        <path d="M 420,148 A 4,4 0,0,0 424,152" class="nofill"></path>
        <line x1="424" y1="152" x2="448" y2="152" class="solid"></line>
        <line x1="436" y1="152" x2="436" y2="192" class="solid"></line>
        <path d="M 452,148 A 4,4 0,0,1 448,152" class="nofill"></path>
        <path d="M 120,136 A 3,3 0,0,0 118,140" class="nofill"></path>
        <line x1="118" y1="140" x2="138" y2="180" class="solid"></line>
        <line x1="120" y1="136" x2="144" y2="136" class="solid"></line>
        <path d="M 144,136 A 8,8 0,0,1 150,140" class="nofill"></path>
        <line x1="150" y1="140" x2="170" y2="180" class="solid"></line>
        <path d="M 138,180 A 8,8 0,0,0 144,184" class="nofill"></path>
        <line x1="144" y1="184" x2="168" y2="184" class="solid"></line>
        <line x1="156" y1="184" x2="172" y2="216" class="solid"></line>
        <path d="M 170,180 A 3,3 0,0,1 168,184" class="nofill"></path>
        <line x1="172" y1="216" x2="172" y2="248" class="solid"></line>
        <path d="M 328,136 A 8,8 0,0,0 322,140" class="nofill"></path>
        <line x1="322" y1="140" x2="302" y2="180" class="solid"></line>
        <line x1="328" y1="136" x2="352" y2="136" class="solid"></line>
        <path d="M 352,136 A 3,3 0,0,1 354,140" class="nofill"></path>
        <line x1="354" y1="140" x2="334" y2="180" class="solid"></line>
        <path d="M 302,180 A 3,3 0,0,0 304,184" class="nofill"></path>
        <line x1="304" y1="184" x2="328" y2="184" class="solid"></line>
        <line x1="316" y1="184" x2="300" y2="216" class="solid"></line>
        <path d="M 334,180 A 8,8 0,0,1 328,184" class="nofill"></path>
        <line x1="300" y1="216" x2="300" y2="248" class="solid"></line>
        <line x1="144" y1="248" x2="328" y2="248" class="solid"></line>
        <line x1="236" y1="248" x2="236" y2="280" class="solid"></line>
        <path d="M 224,280 A 4,4 0,0,0 220,284" class="nofill"></path>
        <line x1="220" y1="284" x2="220" y2="324" class="solid"></line>
        <line x1="224" y1="280" x2="248" y2="280" class="solid"></line>
        <path d="M 248,280 A 4,4 0,0,1 252,284" class="nofill"></path>
        <line x1="252" y1="284" x2="252" y2="324" class="solid"></line>
        <path d="M 220,324 A 4,4 0,0,0 224,328" class="nofill"></path>
        <line x1="224" y1="328" x2="248" y2="328" class="solid"></line>
        <line x1="236" y1="328" x2="236" y2="368" class="solid"></line>
        <path d="M 252,324 A 4,4 0,0,1 248,328" class="nofill"></path>
    </g>
</svg>

This comment appears to not be in the right format.

  <!--separator-->

This is causing issues in parsing when using postcss:

https://github.com/sveltejs/svelte/issues/7147

ivanceras commented 1 year ago

Fixed in 0.7.2