SVG is mostly drawn in black

[murkle]

We've had a report from one of our users that the attached SVG is mostly drawn in black - is it using an unsupported SVG feature?

SVG is generated by https://github.com/scratchblocks/scratchblocks

thanks,

Mike

scratchblocks.zip

[murkle]

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="194" height="131">
   <defs>
      <filter id="bevelFilter" x0="-50%" y0="-50%" width="200%" height="200%">
         <feGaussianBlur result="blur-1" in="SourceAlpha" stdDeviation="1 1" />
         <feFlood result="flood-2" in="undefined" flood-color="#fff" flood-opacity="0.15" />
         <feOffset result="offset-3" in="blur-1" dx="1" dy="1" />
         <feComposite result="comp-4" operator="arithmetic" in="SourceAlpha" in2="offset-3" k2="1" k3="-1" />
         <feComposite result="comp-5" operator="in" in="flood-2" in2="comp-4" />
         <feFlood result="flood-6" in="undefined" flood-color="#000" flood-opacity="0.7" />
         <feOffset result="offset-7" in="blur-1" dx="-1" dy="-1" />
         <feComposite result="comp-8" operator="arithmetic" in="SourceAlpha" in2="offset-7" k2="1" k3="-1" />
         <feComposite result="comp-9" operator="in" in="flood-6" in2="comp-8" />
         <feMerge result="merge-10">
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="comp-5" />
            <feMergeNode in="comp-9" />
         </feMerge>
      </filter>
      <filter id="inputBevelFilter" x0="-50%" y0="-50%" width="200%" height="200%">
         <feGaussianBlur result="blur-1" in="SourceAlpha" stdDeviation="1 1" />
         <feFlood result="flood-2" in="undefined" flood-color="#fff" flood-opacity="0.15" />
         <feOffset result="offset-3" in="blur-1" dx="-1" dy="-1" />
         <feComposite result="comp-4" operator="arithmetic" in="SourceAlpha" in2="offset-3" k2="1" k3="-1" />
         <feComposite result="comp-5" operator="in" in="flood-2" in2="comp-4" />
         <feFlood result="flood-6" in="undefined" flood-color="#000" flood-opacity="0.7" />
         <feOffset result="offset-7" in="blur-1" dx="1" dy="1" />
         <feComposite result="comp-8" operator="arithmetic" in="SourceAlpha" in2="offset-7" k2="1" k3="-1" />
         <feComposite result="comp-9" operator="in" in="flood-6" in2="comp-8" />
         <feMerge result="merge-10">
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="comp-5" />
            <feMergeNode in="comp-9" />
         </feMerge>
      </filter>
      <filter id="inputDarkFilter" x0="-50%" y0="-50%" width="200%" height="200%">
         <feFlood result="flood-1" in="undefined" flood-color="#000" flood-opacity="0.2" />
         <feComposite result="comp-2" operator="in" in="flood-1" in2="SourceAlpha" />
         <feMerge result="merge-3">
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="comp-2" />
         </feMerge>
      </filter>
      <path d="M1.504 21L0 19.493 4.567 0h1.948l-.5 2.418s1.002-.502 3.006 0c2.006.503 3.008 2.01 6.517 2.01 3.508 0 4.463-.545 4.463-.545l-.823 9.892s-2.137 1.005-5.144.696c-3.007-.307-3.007-2.007-6.014-2.51-3.008-.502-4.512.503-4.512.503L1.504 21z" fill="#3f8d15" id="greenFlag" />
      <path d="M6.724 0C3.01 0 0 2.91 0 6.5c0 2.316 1.253 4.35 3.14 5.5H5.17v-1.256C3.364 10.126 2.07 8.46 2.07 6.5 2.07 4.015 4.152 2 6.723 2c1.14 0 2.184.396 2.993 1.053L8.31 4.13c-.45.344-.398.826.11 1.08L15 8.5 13.858.992c-.083-.547-.514-.714-.963-.37l-1.532 1.172A6.825 6.825 0 0 0 6.723 0z" fill="#fff" id="turnRight" />
      <path d="M3.637 1.794A6.825 6.825 0 0 1 8.277 0C11.99 0 15 2.91 15 6.5c0 2.316-1.253 4.35-3.14 5.5H9.83v-1.256c1.808-.618 3.103-2.285 3.103-4.244 0-2.485-2.083-4.5-4.654-4.5-1.14 0-2.184.396-2.993 1.053L6.69 4.13c.45.344.398.826-.11 1.08L0 8.5 1.142.992c.083-.547.514-.714.963-.37l1.532 1.172z" fill="#fff" id="turnLeft" />
      <path d="M0 0L4 4L0 8Z" fill="#111" id="addInput" />
      <path d="M4 0L4 8L0 4Z" fill="#111" id="delInput" />
      <g id="loopArrow">
         <path d="M8 0l2 -2l0 -3l3 0l-4 -5l-4 5l3 0l0 3l-8 0l0 2" fill="#000" opacity="0.3" />
         <path d="M8 0l2 -2l0 -3l3 0l-4 -5l-4 5l3 0l0 3l-8 0l0 2" fill="#fff" opacity="0.9" transform="translate(-1 -1)" />
      </g>
      <style><![CDATA[.sb-label{font-family:Lucida Grande,Verdana,Arial,DejaVu Sans,sans-serif;font-weight:700;fill:#fff;font-size:10px;word-spacing:+1px}.sb-obsolete{fill:#d42828}.sb-motion{fill:#4a6cd4}.sb-looks{fill:#8a55d7}.sb-sound{fill:#bb42c3}.sb-pen{fill:#0e9a6c}.sb-events{fill:#c88330}.sb-control{fill:#e1a91a}.sb-sensing{fill:#2ca5e2}.sb-operators{fill:#5cb712}.sb-variables{fill:#ee7d16}.sb-list{fill:#cc5b22}.sb-custom{fill:#632d99}.sb-custom-arg{fill:#5947b1}.sb-extension{fill:#4b4a60}.sb-grey{fill:#969696}.sb-bevel{filter:url(#bevelFilter)}.sb-input{filter:url(#inputBevelFilter)}.sb-input-number,.sb-input-number-dropdown,.sb-input-string{fill:#fff}.sb-literal-dropdown,.sb-literal-number,.sb-literal-number-dropdown,.sb-literal-string{font-weight:400;font-size:9px;word-spacing:0}.sb-literal-number,.sb-literal-number-dropdown,.sb-literal-string{fill:#000}.sb-darker{filter:url(#inputDarkFilter)}.sb-outline{stroke:#fff;stroke-opacity:.2;stroke-width:2;fill:none}.sb-define-hat-cap{stroke:#632d99;stroke-width:1;fill:#8e2ec2}.sb-comment{fill:#ffffa5;stroke:#d0d1d2;stroke-width:1}.sb-comment-line{fill:#ffff80}.sb-comment-label{font-family:Helevetica,Arial,DejaVu Sans,sans-serif;font-weight:700;fill:#5c5d5f;word-spacing:0;font-size:12px}]]></style>
   </defs>
   <g>
      <g transform="translate(0 0)">
         <g transform="translate(2 0)">
            <path d="M 0 12 L 0 12 A 80 80 0 0 1 80 10 L 107 10 L 110 13 L 110 35 L 107 38 L 27 38 L 24 41 L 16 41 L 13 38 L 3 38 L 0 35 Z" class="sb-events sb-bevel" />
            <text x="0" y="10" class="sb-label " transform="translate(6 18)">when</text>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#greenFlag" transform="translate(41 12)" />
            <text x="0" y="10" class="sb-label " transform="translate(65 18)">clicked</text>
         </g>
         <g transform="translate(2 38)">
            <path d="M 0 3 L 3 0 L 13 0 L 16 3 L 24 3 L 27 0 L 187 0 L 190 3 L 190 19 L 187 22 L 27 22 L 24 25 L 16 25 L 13 22 L 3 22 L 0 19 Z" class="sb-looks sb-bevel" />
            <text x="0" y="10" class="sb-label " transform="translate(6 5)">switch</text>
            <text x="0" y="10" class="sb-label " transform="translate(47 5)">backdrop</text>
            <text x="0" y="10" class="sb-label " transform="translate(103 5)">to</text>
            <g transform="translate(118 4)">
               <g width="66" height="14" class="sb-input sb-input-dropdown">
                  <rect x="0" y="0" width="66" height="14" class="sb-looks sb-darker" />
               </g>
               <text x="0" y="10" class="sb-label sb-literal-dropdown" transform="translate(4 0)">backdrop1</text>
               <polygon points="7 0 3.5 4 0 0" fill="#000" opacity="0.6" transform="translate(56 5)" />
            </g>
         </g>
      </g>
      <g transform="translate(0 73)">
         <g transform="translate(2 0)">
            <path d="M 0 12 L 0 12 A 80 80 0 0 1 80 10 L 161 10 L 164 13 L 164 30 L 161 33 L 27 33 L 24 36 L 16 36 L 13 33 L 3 33 L 0 30 Z" class="sb-events sb-bevel" />
            <text x="0" y="10" class="sb-label " transform="translate(6 16)">when</text>
            <g transform="translate(41 15)">
               <g width="45" height="14" class="sb-input sb-input-dropdown">
                  <rect x="0" y="0" width="45" height="14" class="sb-events sb-darker" />
               </g>
               <text x="0" y="10" class="sb-label sb-literal-dropdown" transform="translate(4 0)">space</text>
               <polygon points="7 0 3.5 4 0 0" fill="#000" opacity="0.6" transform="translate(35 5)" />
            </g>
            <text x="0" y="10" class="sb-label " transform="translate(90 16)">key</text>
            <text x="0" y="10" class="sb-label " transform="translate(114 16)">pressed</text>
         </g>
         <g transform="translate(2 33)">
            <path d="M 0 3 L 3 0 L 13 0 L 16 3 L 24 3 L 27 0 L 90 0 L 93 3 L 93 19 L 90 22 L 27 22 L 24 25 L 16 25 L 13 22 L 3 22 L 0 19 Z" class="sb-looks sb-bevel" />
            <text x="0" y="10" class="sb-label " transform="translate(6 5)">next</text>
            <text x="0" y="10" class="sb-label " transform="translate(35 5)">backdrop</text>
         </g>
      </g>
   </g>
</svg>

[murkle]

This seems to be the problem: <style><![CDATA[.sb-label{font-family:Lucida Grande,Verdana,Arial,DejaVu Sans,sans-serif;font-weight:700;fill:#fff;font-size:10px;word-spacing:+1px}.sb-obsolete{fill:#d42828}.sb-motion{fill:#4a6cd4}.sb-looks{fill:#8a55d7}.sb-sound{fill:#bb42c3}.sb-pen{fill:#0e9a6c}.sb-events{fill:#c88330}.sb-control{fill:#e1a91a}.sb-sensing{fill:#2ca5e2}.sb-operators{fill:#5cb712}.sb-variables{fill:#ee7d16}.sb-list{fill:#cc5b22}.sb-custom{fill:#632d99}.sb-custom-arg{fill:#5947b1}.sb-extension{fill:#4b4a60}.sb-grey{fill:#969696}.sb-bevel{filter:url(#bevelFilter)}.sb-input{filter:url(#inputBevelFilter)}.sb-input-number,.sb-input-number-dropdown,.sb-input-string{fill:#fff}.sb-literal-dropdown,.sb-literal-number,.sb-literal-number-dropdown,.sb-literal-string{font-weight:400;font-size:9px;word-spacing:0}.sb-literal-number,.sb-literal-number-dropdown,.sb-literal-string{fill:#00f}.sb-darker{filter:url(#inputDarkFilter)}.sb-outline{stroke:#fff;stroke-opacity:.2;stroke-width:2;fill:none}.sb-define-hat-cap{stroke:#632d99;stroke-width:1;fill:#8e2ec2}.sb-comment{fill:#ffffa5;stroke:#d0d1d2;stroke-width:1}.sb-comment-line{fill:#ffff80}.sb-comment-label{font-family:Helevetica,Arial,DejaVu Sans,sans-serif;font-weight:700;fill:#5c5d5f;word-spacing:0;font-size:12px}]]></style>

[murkle]

Sorry, tried with a simpler example and I see this in the console 😄

WARNING: CSS parser not implemented yet

[murkle]

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px; /* Note: The value of a pixel depends
                             on the view box */
    }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>

[blackears]

Yes, at the moment SVG Salamander does not handle CSS stylesheets. The code base really needs an overhaul, but at the moment I don't have any time I can devote to serious work on the project (and likely won't any time soon).

[murkle]

Thanks, good to know!