SVG icon in a button not preserved when copy/pasting the button

Help & Support
1

When copy/pasting (or cutting/pasting) a button with the following SVG code somewhere else (in the same toolbar or another one), the icon reverts to the default (yellow smiley).

<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 113.24 122.88" style="enable-background:new 0 0 113.24 122.88" xml:space="preserve"><style type="text/css">
<![CDATA[	.st0{fill:#263357;}	.st1{fill:#F86464;}	.st2{fill:#61C4F2;}]]>
</style><g><path class="st0" d="M51.6,48.39c-3.95,0.36-7.53,1.49-10.49,3.24c-2.83,1.68-5.09,3.95-6.58,6.68c-1.48,2.73-2.19,5.94-1.91,9.51 c0.27,3.44,1.45,7.22,3.73,11.26c0.88-0.13,1.75-0.22,2.63-0.28c4.21-0.25,8.4,0.39,12.31,1.83c1.52,0.56,3,1.24,4.42,2.04h38.63 c0.76,0,1.37,0.61,1.37,1.37v11.38c0,0.76-0.61,1.37-1.37,1.37H68.69c1.46,3.21,2.45,6.78,2.83,10.68h27.05l0,0 c0.34,0,0.68,0.12,0.94,0.38l13.23,12.6c0.31,0.25,0.5,0.63,0.5,1.06c0,0.76-0.61,1.37-1.37,1.37H1.37v-0.01 c-0.31,0-0.61-0.1-0.87-0.31c-0.58-0.48-0.67-1.34-0.19-1.92l10.08-12.29c0.01-3.73,0.74-7.19,2.09-10.4 c1.27-3.05,3.09-5.88,5.35-8.53c-2.71-4.55-4.58-9.04-5.7-13.39c-2.41-9.33-1.41-18.02,1.94-25.46c3.34-7.43,9.03-13.6,16.02-17.92 c3.44-2.13,7.21-3.8,11.16-4.96l-0.86-1.71c-0.02-0.04-0.05-0.08-0.07-0.13c-0.33-0.68-0.04-1.5,0.65-1.83l1.66-0.79l-3.98-7.92 l-2.38,1.24c-0.04,0.03-0.09,0.05-0.13,0.07c-0.68,0.33-1.5,0.05-1.83-0.63l-3.35-6.88l0,0c-0.32-0.66-0.06-1.46,0.59-1.81 l13.5-7.1c0.03-0.02,0.05-0.03,0.08-0.05c0.67-0.34,1.5-0.07,1.84,0.6l3.5,6.86l0,0c0.34,0.67,0.08,1.48-0.59,1.83l-1.8,0.94 l4.3,8.19l1.92-0.92l0,0c0.66-0.32,1.46-0.05,1.8,0.6l16.85,32.19l1.64-0.87c0.67-0.35,1.5-0.1,1.85,0.57l3.76,7.14l0,0l0.01,0.01 c0.35,0.67,0.08,1.5-0.59,1.84L59.67,69.45l-0.04,0.02c-0.68,0.33-1.5,0.04-1.83-0.64l-3.4-7.02c-0.33-0.66-0.07-1.47,0.59-1.82 l1.9-1.01L51.6,48.39L51.6,48.39L51.6,48.39z"/><path class="st1" d="M70.5,110.22c-0.05,0.01-0.11,0.02-0.16,0.02c-0.11,0.01-0.22,0-0.32-0.02H12.4l-8.14,9.93h104.19l-10.43-9.93 H70.5L70.5,110.22L70.5,110.22z"/><path class="st1" d="M20.66,90.32c-0.04,0.06-0.08,0.12-0.13,0.17l0,0c-2.37,2.65-4.26,5.47-5.53,8.52 c-1.1,2.64-1.75,5.45-1.86,8.47h55.63c-0.79-7.58-4.08-13.79-8.74-18.24c-2.81-2.68-6.12-4.72-9.68-6.03 c-3.56-1.31-7.38-1.9-11.2-1.67C32.61,81.93,26.05,84.71,20.66,90.32L20.66,90.32L20.66,90.32z"/><path class="st2" d="M59.79,85.41c0.73,0.58,1.44,1.19,2.12,1.84c2.06,1.96,3.87,4.24,5.36,6.8h25.69v-8.64H59.79L59.79,85.41 L59.79,85.41z"/><polygon class="st2" points="45.1,22.06 45.26,21.98 49.88,19.69 45.69,11.71 42.61,13.24 41.08,14.04 45.1,22.06 45.1,22.06"/><rect x="59.67" y="69.45" width="0" height="0"/><path class="st2" d="M59.31,57.7l0.93-0.49l10.29-5.49l-16.23-31l-8.18,3.9l-1.03,0.51l0,0c-0.07,0.03-0.13,0.06-0.2,0.08 l-1.48,0.71L59.31,57.7L59.31,57.7L59.31,57.7z"/><polygon class="st2" points="77.14,57.36 74.66,52.66 60.15,60.35 59.35,60.77 59.35,60.77 59.32,60.79 59.28,60.81 57.43,61.79 59.65,66.38 77.14,57.36 77.14,57.36"/><path class="st2" d="M42.49,30.18c-3.89,1.08-7.59,2.71-10.97,4.8c-6.53,4.03-11.84,9.8-14.96,16.72 c-3.11,6.91-4.03,14.98-1.79,23.66c1,3.88,2.64,7.9,5,11.99c4.15-3.96,8.88-6.47,13.76-7.7c-2.2-4.11-3.36-8.02-3.65-11.62 c-0.32-4.12,0.5-7.84,2.23-11.02c1.72-3.17,4.34-5.79,7.59-7.73c3.03-1.8,6.63-3.01,10.58-3.5L42.49,30.18L42.49,30.18L42.49,30.18 z"/><path class="st2" d="M47.42,7.66l-2.26-4.42L34,9.11l2.16,4.43l2.09-1.09c0.11-0.11,0.23-0.2,0.37-0.27l2.94-1.46L47.42,7.66 L47.42,7.66L47.42,7.66z"/></g></svg>

In order to recover the icon, one needs to go and edit the xml in the pasted button SVG dialog.

This seems related to the line break that gets introduced between the two following lines:

<![CDATA[	.st0{fill:#263357;}	.st1{fill:#F86464;}	.st2{fill:#61C4F2;}]]>
</style>

When the inial SVG code is a one liner, in the copied button, the svg code in the destination button looks like below (beginning of first line stripped, end of last line stripped):

<![CDATA[	.st0{fill:#263357;}	.st1{fill:#F86464;}	.st2{fill:#61C4F2;}]]

></style><g>

Reverting everything on one line makes the icon come back.
This could be related to the way the (xml content of the) button is copied internally ...

EDIT:

  • This also occurs if the button is dropped into a file display to generate the .dcf file (that file has the same "formatting" issue than the copied button).
  • On second though, this could also be due to the fact that this svg code is containing a <![CDATA[ .st0{fill:#263357;} .st1{fill:#F86464;} .st2{fill:#61C4F2;}]]> and the way the svg is stored is also using a <![CDATA[ ...> which does not appear in the svg code dialog.

EDIT2: Using 13.23.1
Seeing comments on 13.23.4 about the way of using style, this svg code can probably be converted to something more compatible.
Being no svg expert, I searched a bit, and it looks like this code with the <![CDATA[ can be simplified to the following (completely removing the CDATA part):

<style type="text/css">.st0{fill:#263357;} .st1{fill:#F86464;} .st2{fill:#61C4F2;}
</style><g>

This works both as a way of displaying properly the SVG and when copy/pasting it.
I don't know how this can be best handled (fixing the copy/paste mechanism? displaying some kind of alert when entering svg xml code? ...).

2

I'm guessing it's the CDATA that's causing it, because Opus stores the SVG text you provide in a CDATA node too, and I don't see how nested CDATA could work. Probably we need to look at escaping the inner one (although that's not simple, because the whole point of CDATA is that its contents don't need escaping).

FWIW as you discovered there's no reason for the contents of the style element to be wrapped in a CDATA anyway, so removing it also fixes the problem. But we obviously need to deal with it if this is a common pattern.

3

Fixed in the next beta.