SVG Icon path doesn't show

Question

i have this svg-path as an header-icon. Now i want to add a letter to the path by using the gimp-method discussed here, but everytime i add the path for the "B" nothing is showing up. Any advice on what i am doing wrong? Here's the current (working) code and an image of what i'm trying to get.

Also, here is the .svg i'm using. Maybe there's something wrong with the svg itself and therefore i don't get the right paths in the text-file?

Hope someone is able to help me out with this issue.

<svg viewBox="0 0 259 190"><title>Header Icon</title>
  <defs>
     <linearGradient id="grd" x2="100%" y2="100%" > 
        <stop offset="0%" stop-color="#000000"></stop>
        <stop offset="25%" stop-color="#bd2478"></stop>
        <stop offset="35%" stop-color="#54bdff"></stop>
        <stop offset="55%" stop-color="#96a318"></stop>
        <stop offset="100%" stop-color="#000000"></stop>
        </linearGradient>
  <mask id="msk">
  <g fill="white">
 <path d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
  c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
  c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
  c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
  c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
  c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
 <path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
  c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
  c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
  c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
  c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
  c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
 <path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
  c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
  c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
  c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
  c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
 <path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
  c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
  c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
  c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
  C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g> 
  </mask>
  </defs>
   <g style="mask: url(#msk)">
  <rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
     <animateTransform 
     attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="0,0; 2000,0; 0,0" 
        begin="0s"
        calcMode="linear" 
        dur="10s" 
        repeatCount="indefinite" />
  </rect>
  </g>
</svg>

Your question is a little confusing. The SVG you included and the SVG you link to are different. It's not clear what you are trying to do because of that. — Paul LeBeau, Apr 30 '19 at 15:07
The SVG posted in your question won't work as a stand-alone SVG file (ie included via `` etc). That's because it needs to have the correct `xmlns` attribute ( `xmlns="http://www.w3.org/2000/svg"`). Use the linked file for comparison. — Paul LeBeau, Apr 30 '19 at 15:11
Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 3.0 license](//creativecommons.org/licenses/by-sa/3.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](//meta.stackexchange.com/q/5221) — double-beep, Apr 30 '19 at 18:36

score 1 · Answer 1 · answered Apr 30 '19 at 14:10

You need to add the path for the B outside the masked group like so:

<svg viewBox="0 0 259 190"><title>Header Icon</title>
  <defs>
     <linearGradient id="grd"> 
       <stop offset="0" stop-color="black" />
        </linearGradient>
  <mask id="msk">
  <g fill="white">
 <path  d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
  c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
  c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
  c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
  c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
  c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
 <path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
  c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
  c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
  c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
  c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
  c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
 <path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
  c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
  c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
  c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
  c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
 <path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
  c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
  c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
  c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
  C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g> 
  </mask>
  </defs>
   <g style="mask: url(#msk)">
  <rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
     <animateTransform 
     attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="0,0; 2000,0; 0,0" 
        begin="0s"
        calcMode="linear" 
        dur="10s" 
        repeatCount="indefinite" />
  </rect>
  </g>
  
 
 <path id="letterB" d="M141.864,42.852c2.736-0.576,7.057-1.008,11.449-1.008c6.264,0,10.297,1.08,13.32,3.528
  c2.521,1.872,4.033,4.752,4.033,8.568c0,4.681-3.097,8.785-8.209,10.657v0.144c4.608,1.152,10.009,4.968,10.009,12.169
  c0,4.176-1.656,7.345-4.104,9.721c-3.384,3.096-8.856,4.537-16.777,4.537c-4.32,0-7.633-0.288-9.721-0.576V42.852z M148.129,62.726
  h5.688c6.624,0,10.513-3.457,10.513-8.137c0-5.688-4.32-7.921-10.657-7.921c-2.88,0-4.536,0.216-5.544,0.432V62.726z
   M148.129,85.983c1.224,0.216,3.024,0.288,5.256,0.288c6.48,0,12.457-2.376,12.457-9.433c0-6.625-5.688-9.361-12.528-9.361h-5.185
  V85.983z"/>

</svg>

I'm not very sure I understand you. Try adding the path for the B to the `` inside the mask. — enxaneta, Apr 30 '19 at 14:55

SVG Icon path doesn't show

1 Answers1