Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inline SVG markup not recognised #119

Closed
kingsleyh opened this issue May 26, 2019 · 7 comments
Closed

Inline SVG markup not recognised #119

kingsleyh opened this issue May 26, 2019 · 7 comments
Labels
enhancement New feature or request language Language feature

Comments

@kingsleyh
Copy link

I am trying to inline some SVG and the syntax is not recognised:

<svg id="svg-distributed" width="154px" height="154px" viewBox="0 0 308 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

produces error:

The name of an attribute and its value must be separated by an equal sign =

I was looking for the equal sign = but found :xlink="http://www.w3.org/1999/xlink"> instead.
@gdotdesign
Copy link
Member

Currently the namespace syntax : is not supported yet.

In my experience it is usually OK to remove the xmlns:xlink attribute, so for now that is the workaround.

Will keep this issue for the namespace support.

@gdotdesign gdotdesign added language Language feature enhancement New feature or request labels May 26, 2019
@kingsleyh
Copy link
Author

It can't cope with my SVG

<svg class="siimple-grid-col--sm-hide" id="conv" width="600px" height="225px" viewBox="0 0 800 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <title>"Conveyor Belt"</title>
  <desc>"Conveyor Belt"</desc>
  <defs>
    <path
      d="M4.72081395,28.275931 C5.45247287,30.8677931 8.37372868,33.1556552 12.2875659,33.1556552 C17.036624,33.1556552 19.5409419,30.3593793 19.5409419,27.5133103 C19.5933953,24.0553103 16.5147791,22.530069 13.4361628,21.7674483 L8.79201163,20.6497241 C1.1728062,18.8191724 0.0242093023,14.4976552 0.0242093023,11.4982759 C0.0242093023,5.60041379 5.55603488,1.63531034 11.6621589,1.63531034 C17.4011085,1.63531034 21.5247597,4.5337931 22.8280271,9.05841379 C22.9329341,9.41351724 22.9853876,9.82103448 22.9853876,10.2272414 C22.9853876,11.3462759 22.4110891,12.3631034 20.5846318,12.3631034 C19.6983023,12.3631034 18.7057209,12.0066897 18.3412364,10.7356552 C17.453562,7.48206897 14.8967907,6.15993103 11.6097054,6.15993103 C8.1128062,6.15993103 4.87817442,8.24468966 4.87817442,11.4471724 C4.87817442,12.9724138 5.45247287,15.2602759 9.99171705,16.3282069 L14.6883217,17.445931 C20.8455543,18.9213793 24.393562,22.2758621 24.393562,27.0546897 C24.393562,32.6983448 20.0103333,37.5793793 12.2875659,37.5793793 C5.97431783,37.5793793 1.74710465,34.2746897 0.285131783,29.8011724 C0.181569767,29.4447586 0.129116279,29.0883448 0.129116279,28.7843448 C0.129116279,27.36 1.27771318,26.5973793 2.52987209,26.5973793 C3.57356202,26.5973793 4.40878295,27.3088966 4.72081395,28.275931 Z M47.3022868,34.9862069 L47.3022868,33.512069 C45.8416589,36.3594483 42.3447597,37.5793793 39.6830814,37.5793793 C33.6307558,37.5793793 30.2912171,33.7151724 30.2912171,27.0546897 L30.2912171,15.4122759 C30.2912171,14.1425517 31.334907,13.0746207 32.6906279,13.0746207 C33.9952403,13.0746207 35.0389302,14.1425517 35.0389302,15.4122759 L35.0389302,26.7506897 C35.0389302,30.7157931 37.0752016,33.0547586 40.4147403,33.0547586 C43.8578411,33.0547586 47.3022868,31.1731034 47.3022868,26.140069 L47.3022868,15.4122759 C47.3022868,14.1425517 48.3459767,13.0746207 49.7030426,13.0746207 C51.007655,13.0746207 52.051345,14.1425517 52.051345,15.4122759 L52.051345,34.9862069 C52.051345,36.2572414 51.007655,37.3251724 49.7030426,37.3251724 C48.3459767,37.3251724 47.3022868,36.2572414 47.3022868,34.9862069 Z M62.3833372,30.6646897 C63.0611977,32.3930345 64.992562,33.512069 67.4444264,33.512069 C69.8976357,33.512069 71.724093,32.2410345 71.724093,30.3593793 C71.724093,28.6310345 70.3145736,27.7675172 68.4881163,27.36 L65.1485775,26.5973793 C61.0262713,25.5294483 58.574407,23.5468966 58.574407,19.7848966 C58.574407,15.8708966 62.1748682,12.8204138 67.0799419,12.8204138 C70.2634651,12.8204138 73.3420814,13.9381379 74.7502558,16.6833103 C74.9587248,17.0397241 75.0111783,17.445931 75.0111783,17.7512414 C75.0111783,19.2764828 73.4980969,19.836 72.7677829,19.836 C72.0885775,19.836 71.5680775,19.4795862 71.0462326,18.8191724 C69.9500891,17.3961379 68.6979302,16.8366207 67.1835039,16.8366207 C64.887655,16.8366207 63.3745736,18.1587586 63.3745736,19.9382069 C63.3745736,21.4634483 64.887655,22.3269655 66.4531899,22.6833793 L70.0536512,23.5468966 C75.1160853,24.7668276 76.3682442,27.7675172 76.3682442,30.4615862 C76.3682442,34.884 71.9850155,37.5793793 66.9225814,37.5793793 C63.1661047,37.5793793 59.3047209,35.5457241 58.156124,31.8846207 C58.1036705,31.6304138 58.052562,31.3762069 58.052562,31.1731034 C58.052562,29.9531724 59.2522674,29.3425517 60.3484109,29.3425517 C61.1836318,29.3425517 62.0175078,29.750069 62.3833372,30.6646897 Z M104.859903,23.3437931 L104.859903,34.9862069 C104.859903,36.2572414 103.816213,37.3251724 102.459147,37.3251724 C101.154535,37.3251724 100.110845,36.2572414 100.110845,34.9862069 L100.110845,23.6491034 C100.110845,19.7337931 97.7114341,17.3450345 94.3718953,17.3450345 C91.0310116,17.3450345 86.9611589,19.1755862 86.9611589,24.2584138 L86.9611589,34.9862069 C86.9611589,36.2572414 85.917469,37.3251724 84.5604031,37.3251724 C83.2557907,37.3251724 82.2121008,36.2572414 82.2121008,34.9862069 L82.2121008,2.50013793 C82.2121008,1.22910345 83.2557907,0.161172414 84.5604031,0.161172414 C85.917469,0.161172414 86.9611589,1.22910345 86.9611589,2.50013793 L86.9611589,16.8877241 C88.4217868,14.0403448 92.335624,12.8204138 94.9973023,12.8204138 C101.103426,12.8204138 104.912357,16.6833103 104.859903,23.3437931 Z M111.22695,4.63468966 C111.22695,2.90634483 112.740031,1.63531034 114.514035,1.63531034 C116.340492,1.63531034 117.80112,2.90634483 117.80112,4.63468966 C117.80112,6.36303448 116.340492,7.63406897 114.514035,7.63406897 C112.740031,7.63406897 111.22695,6.36303448 111.22695,4.63468966 Z M116.914791,34.9862069 C116.914791,36.2572414 115.871101,37.3251724 114.514035,37.3251724 C113.209422,37.3251724 112.165733,36.2572414 112.165733,34.9862069 L112.165733,15.4122759 C112.165733,14.1425517 113.209422,13.0746207 114.514035,13.0746207 C115.871101,13.0746207 116.914791,14.1425517 116.914791,15.4122759 L116.914791,34.9862069 Z M136.691101,19.5817931 C136.691101,9.61662069 144.727244,1.63531034 154.903221,1.63531034 C159.599826,1.63531034 163.774585,3.26275862 166.853202,6.00793103 C167.791984,6.82034483 167.949345,8.2957931 167.114124,9.31262069 C166.175341,10.3294483 164.660915,10.3792414 163.669678,9.56682759 C161.321376,7.53317241 158.347667,6.21103448 154.903221,6.21103448 C147.388922,6.21103448 141.545066,12.2097931 141.545066,19.6328966 C141.545066,27.0546897 147.388922,33.0036552 154.903221,33.0036552 C158.347667,33.0036552 161.321376,31.6815172 163.669678,29.6478621 C164.660915,28.8341379 166.175341,28.8852414 167.114124,29.902069 C167.949345,30.9188966 167.791984,32.3930345 166.853202,33.2067586 C163.774585,35.951931 159.599826,37.5793793 154.903221,37.5793793 C144.727244,37.5793793 136.691101,29.5469655 136.691101,19.5817931 Z M195.761798,23.3437931 L195.761798,34.9862069 C195.761798,36.2572414 194.718109,37.3251724 193.362388,37.3251724 C192.057775,37.3251724 191.014085,36.2572414 191.014085,34.9862069 L191.014085,23.6491034 C191.014085,19.7337931 188.613329,17.3450345 185.273791,17.3450345 C181.934252,17.3450345 177.863054,19.1755862 177.863054,24.2584138 L177.863054,34.9862069 C177.863054,36.2572414 176.820709,37.3251724 175.463643,37.3251724 C174.159031,37.3251724 173.115341,36.2572414 173.115341,34.9862069 L173.115341,2.50013793 C173.115341,1.22910345 174.159031,0.161172414 175.463643,0.161172414 C176.820709,0.161172414 177.863054,1.22910345 177.863054,2.50013793 L177.863054,16.8877241 C179.325027,14.0403448 183.238864,12.8204138 185.899198,12.8204138 C192.005322,12.8204138 195.814252,16.6833103 195.761798,23.3437931 Z M222.58436,34.9862069 L222.58436,33.4098621 C220.966372,36.1052414 217.418364,37.5793793 214.026372,37.5793793 C207.347295,37.5793793 201.659453,32.6983448 201.659453,25.1743448 C201.659453,17.5992414 207.347295,12.8204138 214.026372,12.8204138 C217.418364,12.8204138 220.966372,14.1923448 222.58436,16.8877241 L222.58436,15.4122759 C222.58436,14.1425517 223.62805,13.0746207 224.932663,13.0746207 C226.289729,13.0746207 227.333419,14.1425517 227.333419,15.4122759 L227.333419,34.9862069 C227.333419,36.2572414 226.289729,37.3251724 224.932663,37.3251724 C223.62805,37.3251724 222.58436,36.2572414 222.58436,34.9862069 Z M222.531907,25.1232414 C222.531907,20.0391034 218.357147,17.3450345 214.44331,17.3450345 C210.060081,17.3450345 206.512074,20.3955172 206.512074,25.1232414 C206.512074,29.8011724 210.060081,33.0547586 214.44331,33.0547586 C218.77543,33.0547586 222.531907,30.1562759 222.531907,25.1232414 Z M233.907589,4.63468966 C233.907589,2.90634483 235.420671,1.63531034 237.196019,1.63531034 C239.022477,1.63531034 240.483105,2.90634483 240.483105,4.63468966 C240.483105,6.36303448 239.022477,7.63406897 237.196019,7.63406897 C235.420671,7.63406897 233.907589,6.36303448 233.907589,4.63468966 Z M239.59543,34.9862069 C239.59543,36.2572414 238.55174,37.3251724 237.196019,37.3251724 C235.891407,37.3251724 234.847717,36.2572414 234.847717,34.9862069 L234.847717,15.4122759 C234.847717,14.1425517 235.891407,13.0746207 237.196019,13.0746207 C238.55174,13.0746207 239.59543,14.1425517 239.59543,15.4122759 L239.59543,34.9862069 Z M251.858787,15.4122759 L251.858787,16.8877241 C253.319415,14.0403448 256.816314,12.8204138 259.477992,12.8204138 C265.530318,12.8204138 268.869857,16.6833103 268.869857,23.3437931 L268.869857,34.9862069 C268.869857,36.2572414 267.826167,37.3251724 266.470446,37.3251724 C265.165833,37.3251724 264.122143,36.2572414 264.122143,34.9862069 L264.122143,23.6491034 C264.122143,19.684 262.087217,17.3450345 258.747678,17.3450345 C255.303233,17.3450345 251.858787,19.2253793 251.858787,24.2584138 L251.858787,34.9862069 C251.858787,36.2572414 250.815097,37.3251724 249.458031,37.3251724 C248.153419,37.3251724 247.109729,36.2572414 247.109729,34.9862069 L247.109729,15.4122759 C247.109729,14.1425517 248.153419,13.0746207 249.458031,13.0746207 C250.815097,13.0746207 251.858787,14.1425517 251.858787,15.4122759 Z"
      id="path-1"></path>
  </defs>
  <g id="Artboard-8" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="conveyor" transform="translate(9.000000, 178.000000)" fill-rule="nonzero">
      <g class="wheels" id="wheel_left" transform="translate(9.000000, 12.000000)">
        <circle id="Oval-5" fill="#83A598" cx="43.3230769" cy="44.6769231" r="43.3230769"></circle>
        <path d="M43.6615385,87.5963303 L43.6615385,0.403669725" id="Line-32" stroke="#282828" stroke-width="3" stroke-linecap="square"></path>
        <path d="M1.75130558,43.6615385 L87.6025406,43.6615385" id="Line-33" stroke="#282828" stroke-width="3" stroke-linecap="square"></path>
        <path d="M11.2299803,9.88307692 L72.7084813,74.0553846" id="Line-34" stroke="#282828" stroke-width="3" stroke-linecap="square"></path>
        <path d="M11.2289593,75.4126582 L78.1248869,12.5873418" id="Line-35" stroke="#282828" stroke-width="3" stroke-linecap="square"></path>
      </g>
      <g class="wheels" id="wheel_right" transform="translate(684.000000, 11.000000)">
        <circle id="Oval-5" fill="#83A598" cx="44.8" cy="46.2" r="44.8"></circle>
        <path d="M46.9,90.5825688 L46.9,0.417431193" id="Line-32" stroke="#282828" stroke-width="3" stroke-linecap="square"></path>
        <path d="M1.81100917,46.9 L90.5889908,46.9" id="Line-33" stroke="#282828" stroke-width="3" stroke-linecap="square"></path>
        <path d="M11.6128205,10.22 L75.1871795,76.58" id="Line-34" stroke="#282828" stroke-width="3" stroke-linecap="square"></path>
        <path d="M11.6117647,77.9835443 L80.7882353,13.0164557" id="Line-35" stroke="#282828" stroke-width="3" stroke-linecap="square"></path>
      </g>
      <path
        d="M728.091164,2.67549732 C758.416477,2.67549732 783,27.4766228 783,58.0703615 C783,88.6641003 758.416477,113.465226 728.091164,113.465226 C724.215985,116.918468 63.2649831,113.465226 54.9088359,113.465226 C24.5835232,113.465226 0,88.6641003 0,58.0703615 C0,27.4766228 24.5835232,2.67549732 54.9088359,2.67549732 C68.9315507,2.67549732 617.436602,-3.34437165 728.091164,2.67549732 Z"
        id="Combined-Shape"
        stroke="#B06286"
        stroke-width="3"></path>
    </g>
    <g id="logo" transform="translate(227.000000, 217.000000)">
      <g id="Group-5" transform="translate(0.000000, 7.862069)">
        <path d="M21.7426434,0.678758621 C7.24799612,0.00131034483 0,4.39227586 0,13.8503448 C0,23.3097241 7.24799612,27.6993793 21.7426434,27.021931" id="Stroke-1" stroke="#FB4934" stroke-width="5.376"></path>
        <path d="M35.8754961,27.021931 C50.3714884,27.6993793 57.6181395,23.3097241 57.6181395,13.8503448 C57.6181395,4.39227586 50.3714884,0.00131034483 35.8754961,0.678758621" id="Stroke-3" stroke="#83A598" stroke-width="5.376"></path>
        <path d="M19.7467209,13.8503448 L37.8727636,13.8503448" id="Stroke-4" stroke="#B8BB25" stroke-width="4.032"></path>
      </g>
      <g id="Group-8" transform="translate(78.007752, 0.000000)">
        <g id="Fill-6-Clipped">
          <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
          </mask>
          <g id="path-1"></g>
          <polygon id="Fill-6" fill="#EADCB1" fill-rule="nonzero" mask="url(#mask-2)" points="-0.0806976744 37.6068966 268.965349 37.6068966 268.965349 0.0262068966 -0.0806976744 0.0262068966"></polygon>
        </g>
      </g>
    </g>
    <g id="s1" style="opacity:0;" transform="translate(38.000000, 83.000000)" fill-rule="nonzero">
      <circle id="Oval-7" stroke="#B8BB25" stroke-width="12" fill="#EADCB1" cx="43.5" cy="43.5" r="43.5"></circle>
      <circle id="Oval-7" stroke="#CB241C" stroke-width="4" fill="#D79A20" cx="30" cy="30" r="8"></circle>
      <circle id="Oval-7" stroke="#CB241C" stroke-width="4" fill="#D79A20" cx="30" cy="57" r="8"></circle>
      <circle id="Oval-7" stroke="#CB241C" stroke-width="4" fill="#D79A20" cx="57" cy="57" r="8"></circle>
      <circle id="Oval-7" stroke="#CB241C" stroke-width="4" fill="#D79A20" cx="57" cy="30" r="8"></circle>
    </g>
    <g id="s2" style="opacity:0;" transform="translate(357.000000, 83.000000)" fill-rule="nonzero">
      <circle id="Oval-7" stroke="#83A598" stroke-width="12" fill="#EADCB1" cx="43.5" cy="43.5" r="43.5"></circle>
      <circle id="Oval-7" stroke="#8DC07C" stroke-width="4" fill="#FABD2E" cx="43.5" cy="43.5" r="10.5"></circle>
    </g>
    <g id="s3" style="opacity:0;" transform="translate(669.000000, 83.000000)" fill-rule="nonzero">
      <circle id="Oval-7" stroke="#D3869B" stroke-width="12" fill="#282828" cx="43.5" cy="43.5" r="43.5"></circle>
      <circle id="Oval-7" stroke="#8DC07C" stroke-width="4" fill="#FABD2E" cx="43.5" cy="43.5" r="10.5"></circle>
      <g id="s" transform="translate(9.000000, 9.000000)">
        <circle id="Oval-7" stroke="#282828" stroke-width="4" fill="#EADCB1" cx="34.5" cy="34.5" r="34.5"></circle>
        <path
          d="M36.4813356,40.0710442 C22.1986127,37.5363919 23.1693363,24.0881493 40.9283064,27.3900046 C47.4378205,28.6002929 47.8977397,44.3177277 44.0538194,48.0906228 C37.7046888,54.3224386 25.7569771,49.2599161 20.0048034,44.8439242 C17.8865162,43.2176975 15.8984646,41.1063797 14.9362674,38.5785475 C13.8571677,35.7435957 13.8886344,32.5143617 14.1580475,29.4836458 C14.3147624,27.7207083 15.026173,25.9114097 16.1793978,24.5941644 C24.8639072,14.674478 44.1598809,19.0892479 50.8329231,28.9317329 C54.3389968,34.1030591 50.4154786,41.6021562 56,44.5122583"
          id="Path-4"
          stroke="#CB241C"
          stroke-width="3"></path>
      </g>
    </g>
    <g id="s4" style="opacity:0;" transform="translate(184.000000, 83.000000)" fill-rule="nonzero">
      <rect id="Rectangle-11" stroke="#CB241C" stroke-width="10" fill="#EADCB1" x="5" y="5" width="80" height="80" rx="8"></rect>
      <path d="M54.5,60.5 L65.5,74.5" id="Line-36" stroke="#8DC07C" stroke-width="3" stroke-linecap="square"></path>
      <rect id="Rectangle-11" stroke="#CB241C" stroke-width="3" fill="#EADCB1" x="35.5" y="35.5" width="17" height="17" rx="8"></rect>
      <path d="M18.5,17.5 L29.5,31.5" id="Line-36" stroke="#8DC07C" stroke-width="3" stroke-linecap="square"></path>
      <path d="M60.5,19.5 L71.5,33.5" id="Line-36" stroke="#8DC07C" stroke-width="3" stroke-linecap="square"></path>
      <path d="M18.5,53.5 L29.5,67.5" id="Line-36" stroke="#8DC07C" stroke-width="3" stroke-linecap="square"></path>
    </g>
    <g id="s5" style="opacity:0;" transform="translate(513.000000, 83.000000)" fill-rule="nonzero" stroke="#989719">
      <g id="Group">
        <path
          d="M0,17.1490385 L0.345238095,70.6058068 L0.345238095,72.7788462 C18.8637034,82.0428561 33.248624,86.674861 43.5,86.674861 C53.751376,86.674861 68.251376,82.0428561 87,72.7788462 L87,15.0282828"
          id="Line-18"
          stroke-width="2"
          fill="#282828"
          stroke-linecap="square"></path>
        <path
          d="M43.5,36.7603102 C67.5243866,36.7603102 87,26.2955544 87,16.9399038 C87,7.58425329 67.5243866,0 43.5,0 C19.4756134,0 0,7.58425329 0,16.9399038 C0,26.2955544 19.4756134,36.7603102 43.5,36.7603102 Z"
          id="Oval-4"
          stroke-width="4"
          fill="#EADCB1"></path>
        <ellipse id="Oval-4" stroke-width="4" fill="#D3869B" cx="43.5" cy="16.9399038" rx="22.9847162" ry="9.41105769"></ellipse>
        <path d="M43.75,37.9416667 L43.75,86.7583333" id="Line" stroke-width="2" stroke-linecap="square"></path>
        <path d="M8.45833333,45.675 L29.2416667,53.4083333" id="Line-19" stroke-width="2" stroke-linecap="square"></path>
        <path d="M8.45833333,53.8916667 L29.2416667,61.625" id="Line-19" stroke-width="2" stroke-linecap="square"></path>
        <path d="M8.45833333,62.1083333 L29.2416667,69.8416667" id="Line-19" stroke-width="2" stroke-linecap="square"></path>
      </g>
    </g>
  </g>
</svg>

@gdotdesign
Copy link
Member

All right, now the code on master properly parses and renders the SVG above.

If you are interested, these are the commits: 78a185f and 1cc5383

@kingsleyh
Copy link
Author

This compiles ok now - but doesn't render as expected

Screenshot 2019-05-26 at 15 26 58

It's missing the text after the logo: it should look like this:

Screenshot 2019-05-26 at 15 28 01

@kingsleyh
Copy link
Author

@gdotdesign any idea why this is not working? It seems to be specifically this part:

<g id="Group-8" transform="translate(60 0)">
              <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"/>
              </mask>
              <polygon id="Fill-6" mask="url(#mask-2)" points="-0.1 28.7 200 28.7 200 0 -0.1 0" fill="#EADCB1"/>
            </g>

@kingsleyh
Copy link
Author

ok I figured it out - I just had to remove the xlink part so this:
<use xlink:href="#path-1"/>
was fixed when I did this:
<use href="#path-1"/>

@kingsleyh
Copy link
Author

not really sure why - but at least it works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request language Language feature
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kingsleyh @gdotdesign