Symbols in panel SVGs

Development
1

Hi

I am using Adobe Illustrator for panel design. As part of some recent redesign I’ve converted some of the assets to symbols so it’s easier to maintain.

However upon using panels with symbols in VCV Rack they don’t render corretly - basically without the assets that are symbols.

What is the reason for this? Is it that the SVG rendering in VCV Rack simply doesn’t support symbols?`

SVG example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25.4mm" height="128.4993mm" viewBox="0 0 72 364.25">
  <defs>
    <symbol id="b" data-name="Tiny Tricks Logo" viewBox="0 0 14.4 9.167">
      <rect width="14.4" height="9.1667" rx="4.5833" ry="4.5833" style="fill: #ef464c"/>
      <g>
        <path d="M4.4909,3.1926H3.1741V1.9673h4V3.1926H5.857V7.1993H4.4909Z" style="fill: #fff"/>
        <path d="M9.9091,5.9741h1.3168V7.1993h-4V5.9741H8.543V1.9673H9.9091Z" style="fill: #fff"/>
      </g>
    </symbol>
    <symbol id="a" data-name="5HP" viewBox="0 0 72 364.25">
      <rect width="72" height="364.25" style="fill: #e6e6e6"/>
      <use width="14.4" height="9.1667" transform="translate(28.8 3.6875)" xlink:href="#b"/>
    </symbol>
    <symbol id="c" data-name="PJ301MPort" viewBox="0 0 23.227 23.227">
      <g>
        <path d="M11.6133,23.1016A11.4883,11.4883,0,1,1,23.1016,11.6133,11.5,11.5,0,0,1,11.6133,23.1016" style="fill: #e6e6e6;stroke: #636663;stroke-width: 0.25px"/>
        <path d="M11.6133,19.8868a8.2735,8.2735,0,1,1,8.2734-8.2735,8.2822,8.2822,0,0,1-8.2734,8.2735" style="fill: #e6e6e6;stroke: #636663;stroke-width: 0.25px"/>
        <path d="M16.7149,11.6133a5.1016,5.1016,0,1,1-5.1015-5.1015,5.103,5.103,0,0,1,5.1015,5.1015"/>
      </g>
    </symbol>
    <symbol id="e" data-name="RoundBlackKnob" viewBox="0 0 28.348 28.348">
      <path d="M28.3476,14.1719A14.1738,14.1738,0,1,1,14.1758,0,14.1736,14.1736,0,0,1,28.3476,14.1719"/>
      <path d="M14.6485.0547A2.1365,2.1365,0,0,0,14.1759,0a2.1145,2.1145,0,0,0-.4727.0547V14.3516h.9453Z" style="fill: #fff"/>
    </symbol>
  </defs>
  <title>A8</title>
  <g>
    <use width="72" height="364.25" xlink:href="#a"/>
    <g>
      <path d="M26.5816,27.957a1.1605,1.1605,0,0,1-.2905-.8853V23.0605h.8613v3.8711a.4932.4932,0,0,0,.1362.3989.5729.5729,0,0,0,.3745.1118H29.378v.7842H27.4464A1.231,1.231,0,0,1,26.5816,27.957Z"/>
      <path d="M30.3824,28.0444a.9472.9472,0,0,1-.3535-.875V24.1875a1.0547,1.0547,0,0,1,.3223-.8608,1.18,1.18,0,0,1,.7769-.2661q.6577,0,1.1338.021t1.0923.0562v.7207H31.401a.5374.5374,0,0,0-.3779.1226.4753.4753,0,0,0-.1328.3677v.917l2.1489.0488v.6792l-2.1489.0488v.8892a.4518.4518,0,0,0,.5039.5181h1.96V28.17q-.8818.0776-2.1279.0913A1.5792,1.5792,0,0,1,30.3824,28.0444Z"/>
      <path d="M33.8653,23.0605h.896l1.33,4.2349,1.33-4.2349h.896l-1.68,5.166H35.545Z"/>
      <path d="M39.1324,28.0444a.9472.9472,0,0,1-.3535-.875V24.1875a1.0547,1.0547,0,0,1,.3223-.8608,1.18,1.18,0,0,1,.7769-.2661q.6577,0,1.1338.021t1.0923.0562v.7207H40.151a.5374.5374,0,0,0-.3779.1226.4753.4753,0,0,0-.1328.3677v.917l2.1489.0488v.6792l-2.1489.0488v.8892a.4518.4518,0,0,0,.5039.5181h1.96V28.17q-.8818.0776-2.1279.0913A1.5792,1.5792,0,0,1,39.1324,28.0444Z"/>
      <path d="M43.2276,27.957a1.1605,1.1605,0,0,1-.2905-.8853V23.0605h.8613v3.8711a.4932.4932,0,0,0,.1362.3989.5729.5729,0,0,0,.3745.1118H46.024v.7842H44.0924A1.231,1.231,0,0,1,43.2276,27.957Z"/>
    </g>
    <g>
      <path d="M33.99,353.0254h1.6938l1.54,5.2012H35.817l-.21-.8262H34.046l-.2026.8262H32.45Zm1.3018,3.1572-.4687-2.002-.4624,2.002Z"/>
      <path d="M37.9483,358.0166a1.0332,1.0332,0,0,1-.3955-.9443v-.6934a1.0926,1.0926,0,0,1,.1226-.5186.57.57,0,0,1,.3955-.2939.7668.7668,0,0,1-.2871-.2412.6446.6446,0,0,1-.1084-.28,3.3363,3.3363,0,0,1-.0176-.3877v-.5889a.9531.9531,0,0,1,.3569-.8223,1.4987,1.4987,0,0,1,.91-.2627h.9941a1.4962,1.4962,0,0,1,.91.2627.9518.9518,0,0,1,.3569.8223v.5889a1.5623,1.5623,0,0,1-.0908.5137.4.4,0,0,1-.3291.2979.5621.5621,0,0,1,.42.3428,1.5257,1.5257,0,0,1,.1055.5674v.6934a1.0792,1.0792,0,0,1-.3608.9482,1.7272,1.7272,0,0,1-.99.248h-.9453A1.9243,1.9243,0,0,1,37.9483,358.0166Zm1.6558-.8955c.14,0,.2295-.0244.269-.0742a.3968.3968,0,0,0,.06-.248V356.47a.3392.3392,0,0,0-.084-.2344.291.291,0,0,0-.231-.0947H39.24a.3177.3177,0,0,0-.2451.0908.3413.3413,0,0,0-.084.2383v.3291a.3414.3414,0,0,0,.0737.252.3656.3656,0,0,0,.2554.07Zm0-2.1279c.1118,0,.1831-.0264.2134-.0771a.6458.6458,0,0,0,.0454-.2939v-.2168c0-.1172-.022-.1914-.0664-.2246a.3242.3242,0,0,0-.1924-.0488H39.24a.3338.3338,0,0,0-.2031.0459c-.0371.03-.0557.1055-.0557.2275v.2168a.5647.5647,0,0,0,.0522.3047.2559.2559,0,0,0,.2065.0664Z"/>
    </g>
    <path d="M14.2878,69.88V48.7355a2.6177,2.6177,0,0,1,2.6177-2.6177h4.9206" style="fill: none;stroke: #ef464c;stroke-linecap: round;stroke-miterlimit: 10"/>
    <path d="M57.7122,69.88V48.7355a2.6177,2.6177,0,0,0-2.6177-2.6177H50.1738" style="fill: none;stroke: #ef464c;stroke-linecap: round;stroke-miterlimit: 10"/>
    <path d="M36.0468,68.249H61.5587a5.6693,5.6693,0,0,1,5.6693,5.6693V341.5738a5.6693,5.6693,0,0,1-5.6693,5.6693H36.0468a0,0,0,0,1,0,0V68.249A0,0,0,0,1,36.0468,68.249Z" style="fill: #ccc"/>
    <g>
      <path d="M46.03,78.7353a1.3146,1.3146,0,0,1-.6646-.7627,6.1686,6.1686,0,0,1,.0034-3.3076,1.36,1.36,0,0,1,.6685-.78,2.8234,2.8234,0,0,1,1.1831-.2065,2.8705,2.8705,0,0,1,1.1934.2065,1.3438,1.3438,0,0,1,.6685.7769,4.7594,4.7594,0,0,1,.2241,1.6626,4.6132,4.6132,0,0,1-.2275,1.6484,1.3335,1.3335,0,0,1-.665.7627,3.6566,3.6566,0,0,1-2.3838,0Zm1.9287-.7173a.8237.8237,0,0,0,.3677-.5283,4.5352,4.5352,0,0,0,.1118-1.1655,4.6718,4.6718,0,0,0-.1152-1.2041.8191.8191,0,0,0-.3677-.5322,1.618,1.618,0,0,0-.7349-.1328,1.536,1.536,0,0,0-.7212.1367.8414.8414,0,0,0-.3711.5317,4.49,4.49,0,0,0-.1191,1.2007,4.6236,4.6236,0,0,0,.1089,1.1689.8136.8136,0,0,0,.36.5249,2.0251,2.0251,0,0,0,1.48,0Z"/>
      <path d="M50.5767,78.5605a1.5173,1.5173,0,0,1-.5073-1.3125V73.727H50.93v3.521a.8071.8071,0,0,0,.28.6963,1.7831,1.7831,0,0,0,1.666,0,.8082.8082,0,0,0,.28-.6963V73.727h.8608v3.521a1.5173,1.5173,0,0,1-.5073,1.3125,3.1087,3.1087,0,0,1-2.9331,0Z"/>
      <path d="M56.0265,74.5039H54.5421V73.727h3.8291v.7769H56.8941v4.3892h-.8677Z"/>
    </g>
    <path d="M10.4413,68.25H35.9532a0,0,0,0,1,0,0v278.993a0,0,0,0,1,0,0H10.4413a5.6693,5.6693,0,0,1-5.6693-5.6693V73.9194A5.6693,5.6693,0,0,1,10.4413,68.25Z" style="fill: #f9f9f9"/>
    <g>
      <path d="M17.4928,73.727h.8613v5.166h-.8613Z"/>
      <path d="M19.3756,73.727h.6929L22.42,77.416V73.727h.8682v5.166h-.6934l-2.3516-3.689v3.689h-.8682Z"/>
    </g>
  </g>
  <g>
    <use width="23.2266" height="23.2266" transform="translate(8.7493 84.5142) scale(0.9892 0.9892)" xlink:href="#c"/>
    <use width="23.2266" height="23.2266" transform="translate(40.0241 84.5142) scale(0.9892 0.9892)" xlink:href="#c"/>
    <use width="28.3476" height="28.3477" transform="translate(21.8262 31.3376)" xlink:href="#e"/>
  </g>
</svg>

All the best, Thomas

2

I’ve had the same issue with copy/paste of svg’s that contain symbols in inkscape (they copy directly as symbols) and have had to edit by hand to expose the data from the symbol containers for them to show up in rack.

I’ve worked around this by having a res-src which contains all of my source, including text elements, that gets processed into res. that tends to work well.

one word of warning if you go this path: not every svgo optimization gets rendered correctly in rack either, so you may end up with some trial and error.

1 Like