How to add image to nodes in Cytoscape - svg

I'm using Cytoscape.js and Svelte to display a graph. I currently have my graph displayed but I want to add an svg image to the background-image of each node.
I've tried a few situations but currently this random .jpg works properly for background image. I cannot get my svg to work at all, it just displays the default circle node.
{
selector: '#HQ',
style: {
// 'background-image': '../../static/icons/server.svg'
// 'background-image': 'url(../../static/icons/server.svg)'
'background-image': 'url(https://live.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg)'
}
}
My question is, am I typing in the file paths incorrectly or could I potentially be something wrong with the SVG itself. I tried my exact SVG in someone elses code and it just doesn't display anything either and they used SVG.
This is the router.svg file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 76 81" fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round">
<style>
<![CDATA[
.RouterB {
stroke: none
}
]]>
</style>
<use xlink:href="#RouterC" x=".5" y=".5" />
<defs>
<linearGradient id="RouterA" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" />
<stop offset="100%" stop-color="gray" />
</linearGradient>
<path id="RouterB" d="M37.527 69.604v2.712l.655 1.356 1.53.904.874-.678v-2.486z" />
</defs>
<symbol id="RouterC" overflow="visible">
<g fill="url(#RouterA)" class="RouterB">
<path d="M69.705 20c0-1.23-.1-2.222-1.324-2.222s-1.324.99-1.324 2.222l-.882 31.11h4.412z" />
<path d="M38.823 2.222C38.823.99 38.722 0 37.5 0s-1.324.99-1.324 2.222l-.882 31.11h4.412z" />
</g>
<path d="M31.4 27.12q-1.53-.904-3.06 0L.82 43.4q-1.53.904 0 1.808l42.826 25.31q1.53.904 3.06 0l27.53-16.27q1.53-.904 0-1.808L31.4 27.12" fill="#eceff1" class="RouterB" />
<path d="M45.175 70.96q.765 0 1.53-.452l27.53-16.27q.765-.452.765-.904v9.04q0 .452-.765.904l-27.53 16.27q-.765.452-1.53.452z" fill="#78909c" class="RouterB" />
<path d="M45.175 70.96q-.792.017-1.584-.45L.765 45.198Q0 44.746 0 44.294v9.04q0 .452.765.904l42.826 25.31q.792.468 1.584.45z" fill="#b0bec5" class="RouterB" />
<path d="M3.223 48.814v6.78l3.715 2.26v-6.78z" fill="#464646" class="RouterB" />
<ellipse cx=".665" cy=".448" rx=".665" ry=".448" transform="matrix(.866025 .5 -.5 .866025 4.666385 51.191101)" class="RouterB" />
<g fill="#464646">
<use xlink:href="#RouterB" class="RouterB" />
<path d="M32.94 66.893v2.712l.655 1.356 1.53.904.874-.678V68.7zm-4.6-2.713v2.712l.655 1.356 1.53.904.874-.678V66z" class="RouterB" />
<use xlink:href="#RouterB" x="-13.765" y="-8.134" class="RouterB" />
<use xlink:href="#RouterB" x="-18.354" y="-10.847" class="RouterB" />
</g>
<path d="M43.2 40.17l8.548-.767-1.185 5.03-2.454-1.45-7.363 4.263-2.37-1.364 7.278-4.348zM27.36 45.5l8.548.767-1.185-5.03-2.454 1.45-7.363-4.263-2.37 1.364 7.278 4.348zm4.687 9.944l-8.548.767 1.185-5.03 2.454 1.45 7.363-4.263 2.37 1.364-7.278 4.348zM48.42 49.8l-8.548-.767 1.185 5.03 2.454-1.45 7.363 4.263 2.37-1.364-7.278-4.348z" class="RouterB" fill="#788f9b" />
</symbol>
</svg>
Thanks

Related

SVG not rendering correctly on iOS Safari & Chrome

On my site https://poshwash.london I have a logo in the header which is an embedded SVG. It looks great everywhere but now when I check on my iPhone either in Safari or Chrome I can see who who wheel over the text rather than just the top half.
svg {
background-color: black;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 424.67 298.43">
<defs>
<filter id="luminosity-noclip" x="-9.15" y="0" width="461.31" height="304.67" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-color="#fff" result="bg" />
<feBlend in="SourceGraphic" in2="bg" />
</filter>
<mask id="mask" x="-9.15" y="0" width="461.31" height="304.67" maskUnits="userSpaceOnUse">
<rect x="-9.15" y="160.88" width="461.31" height="143.79" style="filter:url(#luminosity-noclip)" />
</mask>
</defs>
<title>Logo_original</title>
<rect x="338.14" y="256.69" width="86.54" height="2.81" style="fill:#fff" />
<rect y="256.69" width="86.54" height="2.81" style="fill:#fff" />
<path d="M53.39,204H12.83v21.37h-11V172.17H92q7.56,0,7.56,10.85v8.88Q99.54,204,92,204H53.39Zm32.45-19.51h-73v8.11H86.06a4.49,4.49,0,0,0,2.41-3.84C88.47,187.19,87.59,185.76,85.84,184.45Z" style="fill:#fff" />
<path d="M168.93,225.33H118.39q-8.65,0-8.66-12.93V183.35q0-11.17,8.77-11.18H199q8.34,0,8.34,11.18V212.4q0,12.93-8.34,12.93h-30Zm27.18-15.89V188.83a3.89,3.89,0,0,0-1.2-3.18,7.55,7.55,0,0,0-2.74-1.42H124.09q-3,.11-3,4.6v20.61q1.32,3.28,3,3.29h69.06C194.1,212.58,195.09,211.49,196.11,209.44Z" style="fill:#fff" />
<path d="M314.94,212.4q0,12.93-8.55,12.93h-89v-13h83.09a6.19,6.19,0,0,0,2-1.75,21.7,21.7,0,0,0,1.27-1.87c0-3-1-4.57-3.07-4.71H225.05q-7.67-.22-7.67-11.73v-9q0-11.07,7.78-11.07h89.78v12.5H230.86a2.14,2.14,0,0,0-1.75,1.15,5.15,5.15,0,0,0-.77,3,3.74,3.74,0,0,0,.77,2.63,2.37,2.37,0,0,0,1.75.82h75.53q8.55,0,8.55,12Z" style="fill:#fff" />
<path d="M422.8,225.33H411.62V204H336v21.37H324.91V172.5l11.08-.11v20.17h75.63V172.39l11.18.11Z" style="fill:#fff" />
<path d="M177.67,266.16l-2.2,6.94-3.33-.08,7.72-23.85h3.86L191.53,273l-3.42.08L186,266.16Zm4.12-13.49-3.32,10.8h6.64Z" style="fill:#fff" />
<path d="M239.66,265.13c.58,2.87,2,5,5.11,5,2.46,0,4.39-1.34,4.39-3.94,0-2.87-2.42-3.59-4.71-4.53-3.4-1.44-6.63-2.33-6.63-6.72,0-3.95,3.18-6.14,6.86-6.14,3.9,0,6.18,2.24,7.12,5.87l-2.87.85c-.53-2.28-1.74-3.9-4.3-3.9-1.92,0-3.81,1-3.81,3.09s1.35,2.83,3.14,3.64l5,2.19a5.94,5.94,0,0,1,3.23,5.47c0,4.44-3.09,6.94-7.39,6.94s-7.08-2.77-7.8-6.94Z" style="fill:#fff" />
<path d="M299.68,249.17h3v9.68h9.23v-9.68h3v23.35h-3v-11h-9.23v11h-3Z" style="fill:#fff" />
<polygon points="115.15 272.18 119.03 258.72 122.92 272.18 125.39 272.18 128.31 248.94 125.27 248.59 123.43 264.99 123.34 264.99 119.44 253.52 118.63 253.52 114.73 264.99 114.64 264.99 112.85 248.59 109.76 248.94 112.68 272.18 115.15 272.18" style="fill:#fff" />
<g style="mask:url(#mask)">
<path d="M288.47,95.48c.56.79,1.11,1.58,1.65,2.39C289.58,97.06,289,96.27,288.47,95.48Z" style="fill:#fff;opacity:0.33" />
<path d="M286.15,92.36c.49.62,1,1.25,1.44,1.88C287.12,93.61,286.64,93,286.15,92.36Z" style="fill:#fff;opacity:0.33" />
<path d="M279.29,84.45c-.52-.54-1-1.07-1.57-1.59C278.25,83.38,278.77,83.91,279.29,84.45Z" style="fill:#fff;opacity:0.33" />
<path d="M274.54,79.88c.65.58,1.28,1.17,1.91,1.76C275.82,81.05,275.19,80.46,274.54,79.88Z" style="fill:#fff;opacity:0.33" />
<path d="M206.14,147l.48-1.2H202l-2.19,5.41h-3l2.88-7.13h8.58a1.44,1.44,0,0,1,1.27.55,1.29,1.29,0,0,1,.09,1.31l-.34.85a2.84,2.84,0,0,1-1.16,1.32,3.07,3.07,0,0,1-1.7.54h-4.06L203,147Z" style="fill:#fff" />
<path d="M219.9,151.17H208.52L211.4,144h2.7l-2.16,5.36h2.56l2.17-5.36h2.7l-2.16,5.36h2.56l2.17-5.36h2.7l-2.12,5.26a3,3,0,0,1-1.08,1.33A2.72,2.72,0,0,1,219.9,151.17Z" style="fill:#fff" />
<path d="M205.91,146.72l.48-1.2h-4.64l-2.19,5.42h-3l2.88-7.13H208a1.44,1.44,0,0,1,1.27.54,1.33,1.33,0,0,1,.1,1.32l-.35.85a2.94,2.94,0,0,1-1.16,1.32,3.12,3.12,0,0,1-1.7.53H202.1l.67-1.65Z" style="fill:#fff" />
<path d="M219.66,150.94H208.29l2.87-7.13h2.71l-2.17,5.35h2.57l2.16-5.35h2.71L217,149.16h2.57l2.16-5.35h2.7l-2.12,5.25a2.93,2.93,0,0,1-1.08,1.33A2.73,2.73,0,0,1,219.66,150.94Z" style="fill:#fff" />
<path d="M212.5,0A149.22,149.22,0,1,0,361.71,149.21,149.22,149.22,0,0,0,212.5,0Zm0,264.06A114.85,114.85,0,1,1,236.84,37c2.11-3.39,1.24-8.09-1.52-16.28,5.2,15.4,8.27,16.92,23.67,11.72-6.85,2.32-11,4.21-12.93,7A114.86,114.86,0,0,1,212.5,264.06Z" style="fill:#fff" />
<path d="M244.68,42.87c-.43,3.11.57,7.22,2.59,13.2-5.2-15.39-8.27-16.92-23.67-11.72a47.35,47.35,0,0,0,9.9-4.23,111,111,0,1,0,11.18,2.75Zm51.83,74.28,1.82,5.57,1.47,4.53s-43.93,15.43-45.87,9.44S296.51,117.15,296.51,117.15ZM239,63.13a2.57,2.57,0,0,0-.5-.39A90.49,90.49,0,0,1,287.83,99.5v.11s-35.26,26.81-50.3,17S239,63.13,239,63.13Zm-3.59,67.51a9.3,9.3,0,1,1-6,11.71A9.3,9.3,0,0,1,235.38,130.64Zm-12.59,32.12a9.29,9.29,0,1,1-2.06,13A9.3,9.3,0,0,1,222.79,162.76ZM208,59.4h10.62s1.11,46.54-5.2,46.54S208,59.4,208,59.4Zm4.1,51.75a9.3,9.3,0,1,1-9.3,9.29A9.29,9.29,0,0,1,212.06,111.15Zm-10.73,51.61a9.3,9.3,0,1,1-13,2.06A9.3,9.3,0,0,1,201.33,162.76Zm-15,20.94c5.1,3.7-23,40.84-23,40.84l-4.75-3.45-3.85-2.79S181.25,180,186.35,183.7ZM177,136.61a9.3,9.3,0,1,1,6,11.71A9.31,9.31,0,0,1,177,136.61Zm11.43-74.42.16.06s14.6,41.82.66,53.11-50.45-17.93-50.45-17.93l-.14-.16A90.4,90.4,0,0,1,188.44,62.19Zm-60.95,58,1.47-4.53S173.57,129,171.62,135s-45.94-9.22-45.94-9.22Zm12.79,83.18-.32-.45.33.44Zm-4.66-6.87,0-.06q-.71-1.14-1.38-2.31l-.28-.5c-.46-.81-.91-1.62-1.34-2.44l-.18-.36c-.46-.88-.91-1.76-1.33-2.65l0,0a89.66,89.66,0,0,1-7.29-22.35l-.15-.78a90.63,90.63,0,0,1-1.41-15.82c0-1.34,0-2.69.1-4l.09-.12s44.29-1,50.72,15.78-32.64,42.45-32.64,42.45l-.18.07C138.63,201.16,137.08,198.87,135.62,196.51Zm4.68,6.87c1.46,1.93,3,3.8,4.58,5.61C143.28,207.18,141.76,205.31,140.3,203.38Zm9.85,11.1a90.77,90.77,0,0,0,17.52,13.1A90.77,90.77,0,0,1,150.15,214.48Zm91.54,20.15c-.65.22-1.31.43-2,.63A90.23,90.23,0,0,1,221.27,239c-.69.07-1.37.15-2.06.21-2.22.16-4.45.27-6.71.27a89.8,89.8,0,0,1-31.73-5.8l-.05-.08s12.76-42.42,30.67-43.36,30.29,44.16,30.29,44.16v.21Zm22.52-12-3.84,2.8s-28.26-37-23.16-40.71S269,219.21,269,219.21Zm18.87-17.17-.13,0S246.55,180.27,251.2,163s51.35-15.16,51.35-15.16l.2.05q-.06-3.68-.4-7.29c.27,2.85.43,5.74.43,8.66A89.86,89.86,0,0,1,283.08,205.48Z" style="fill:#fff" />
</g>
</svg>

That SVG contains something that is slightly odd. The mask has an element that has a filter applied. It's valid SVG, but if the mask isn't working, then that would be what I suspect is the problem.
The filter part is totally unnecessary. You can remove it and slightly change the mask for the exact same result.
Try this version and see if it works any better.
svg {
background-color: black;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 424.67 298.43">
<defs>
<mask id="mask" x="-9.15" y="0" width="461.31" height="304.67" maskUnits="userSpaceOnUse">
<rect width="100%" height="100%" style="fill:#fff"/>
<rect x="-9.15" y="160.88" width="461.31" height="143.79" style="fill:#000" />
</mask>
</defs>
<title>Logo_original</title>
<rect x="338.14" y="256.69" width="86.54" height="2.81" style="fill:#fff" />
<rect y="256.69" width="86.54" height="2.81" style="fill:#fff" />
<path d="M53.39,204H12.83v21.37h-11V172.17H92q7.56,0,7.56,10.85v8.88Q99.54,204,92,204H53.39Zm32.45-19.51h-73v8.11H86.06a4.49,4.49,0,0,0,2.41-3.84C88.47,187.19,87.59,185.76,85.84,184.45Z" style="fill:#fff" />
<path d="M168.93,225.33H118.39q-8.65,0-8.66-12.93V183.35q0-11.17,8.77-11.18H199q8.34,0,8.34,11.18V212.4q0,12.93-8.34,12.93h-30Zm27.18-15.89V188.83a3.89,3.89,0,0,0-1.2-3.18,7.55,7.55,0,0,0-2.74-1.42H124.09q-3,.11-3,4.6v20.61q1.32,3.28,3,3.29h69.06C194.1,212.58,195.09,211.49,196.11,209.44Z" style="fill:#fff" />
<path d="M314.94,212.4q0,12.93-8.55,12.93h-89v-13h83.09a6.19,6.19,0,0,0,2-1.75,21.7,21.7,0,0,0,1.27-1.87c0-3-1-4.57-3.07-4.71H225.05q-7.67-.22-7.67-11.73v-9q0-11.07,7.78-11.07h89.78v12.5H230.86a2.14,2.14,0,0,0-1.75,1.15,5.15,5.15,0,0,0-.77,3,3.74,3.74,0,0,0,.77,2.63,2.37,2.37,0,0,0,1.75.82h75.53q8.55,0,8.55,12Z" style="fill:#fff" />
<path d="M422.8,225.33H411.62V204H336v21.37H324.91V172.5l11.08-.11v20.17h75.63V172.39l11.18.11Z" style="fill:#fff" />
<path d="M177.67,266.16l-2.2,6.94-3.33-.08,7.72-23.85h3.86L191.53,273l-3.42.08L186,266.16Zm4.12-13.49-3.32,10.8h6.64Z" style="fill:#fff" />
<path d="M239.66,265.13c.58,2.87,2,5,5.11,5,2.46,0,4.39-1.34,4.39-3.94,0-2.87-2.42-3.59-4.71-4.53-3.4-1.44-6.63-2.33-6.63-6.72,0-3.95,3.18-6.14,6.86-6.14,3.9,0,6.18,2.24,7.12,5.87l-2.87.85c-.53-2.28-1.74-3.9-4.3-3.9-1.92,0-3.81,1-3.81,3.09s1.35,2.83,3.14,3.64l5,2.19a5.94,5.94,0,0,1,3.23,5.47c0,4.44-3.09,6.94-7.39,6.94s-7.08-2.77-7.8-6.94Z" style="fill:#fff" />
<path d="M299.68,249.17h3v9.68h9.23v-9.68h3v23.35h-3v-11h-9.23v11h-3Z" style="fill:#fff" />
<polygon points="115.15 272.18 119.03 258.72 122.92 272.18 125.39 272.18 128.31 248.94 125.27 248.59 123.43 264.99 123.34 264.99 119.44 253.52 118.63 253.52 114.73 264.99 114.64 264.99 112.85 248.59 109.76 248.94 112.68 272.18 115.15 272.18" style="fill:#fff" />
<g style="mask:url(#mask)">
<path d="M288.47,95.48c.56.79,1.11,1.58,1.65,2.39C289.58,97.06,289,96.27,288.47,95.48Z" style="fill:#fff;opacity:0.33" />
<path d="M286.15,92.36c.49.62,1,1.25,1.44,1.88C287.12,93.61,286.64,93,286.15,92.36Z" style="fill:#fff;opacity:0.33" />
<path d="M279.29,84.45c-.52-.54-1-1.07-1.57-1.59C278.25,83.38,278.77,83.91,279.29,84.45Z" style="fill:#fff;opacity:0.33" />
<path d="M274.54,79.88c.65.58,1.28,1.17,1.91,1.76C275.82,81.05,275.19,80.46,274.54,79.88Z" style="fill:#fff;opacity:0.33" />
<path d="M206.14,147l.48-1.2H202l-2.19,5.41h-3l2.88-7.13h8.58a1.44,1.44,0,0,1,1.27.55,1.29,1.29,0,0,1,.09,1.31l-.34.85a2.84,2.84,0,0,1-1.16,1.32,3.07,3.07,0,0,1-1.7.54h-4.06L203,147Z" style="fill:#fff" />
<path d="M219.9,151.17H208.52L211.4,144h2.7l-2.16,5.36h2.56l2.17-5.36h2.7l-2.16,5.36h2.56l2.17-5.36h2.7l-2.12,5.26a3,3,0,0,1-1.08,1.33A2.72,2.72,0,0,1,219.9,151.17Z" style="fill:#fff" />
<path d="M205.91,146.72l.48-1.2h-4.64l-2.19,5.42h-3l2.88-7.13H208a1.44,1.44,0,0,1,1.27.54,1.33,1.33,0,0,1,.1,1.32l-.35.85a2.94,2.94,0,0,1-1.16,1.32,3.12,3.12,0,0,1-1.7.53H202.1l.67-1.65Z" style="fill:#fff" />
<path d="M219.66,150.94H208.29l2.87-7.13h2.71l-2.17,5.35h2.57l2.16-5.35h2.71L217,149.16h2.57l2.16-5.35h2.7l-2.12,5.25a2.93,2.93,0,0,1-1.08,1.33A2.73,2.73,0,0,1,219.66,150.94Z" style="fill:#fff" />
<path d="M212.5,0A149.22,149.22,0,1,0,361.71,149.21,149.22,149.22,0,0,0,212.5,0Zm0,264.06A114.85,114.85,0,1,1,236.84,37c2.11-3.39,1.24-8.09-1.52-16.28,5.2,15.4,8.27,16.92,23.67,11.72-6.85,2.32-11,4.21-12.93,7A114.86,114.86,0,0,1,212.5,264.06Z" style="fill:#fff" />
<path d="M244.68,42.87c-.43,3.11.57,7.22,2.59,13.2-5.2-15.39-8.27-16.92-23.67-11.72a47.35,47.35,0,0,0,9.9-4.23,111,111,0,1,0,11.18,2.75Zm51.83,74.28,1.82,5.57,1.47,4.53s-43.93,15.43-45.87,9.44S296.51,117.15,296.51,117.15ZM239,63.13a2.57,2.57,0,0,0-.5-.39A90.49,90.49,0,0,1,287.83,99.5v.11s-35.26,26.81-50.3,17S239,63.13,239,63.13Zm-3.59,67.51a9.3,9.3,0,1,1-6,11.71A9.3,9.3,0,0,1,235.38,130.64Zm-12.59,32.12a9.29,9.29,0,1,1-2.06,13A9.3,9.3,0,0,1,222.79,162.76ZM208,59.4h10.62s1.11,46.54-5.2,46.54S208,59.4,208,59.4Zm4.1,51.75a9.3,9.3,0,1,1-9.3,9.29A9.29,9.29,0,0,1,212.06,111.15Zm-10.73,51.61a9.3,9.3,0,1,1-13,2.06A9.3,9.3,0,0,1,201.33,162.76Zm-15,20.94c5.1,3.7-23,40.84-23,40.84l-4.75-3.45-3.85-2.79S181.25,180,186.35,183.7ZM177,136.61a9.3,9.3,0,1,1,6,11.71A9.31,9.31,0,0,1,177,136.61Zm11.43-74.42.16.06s14.6,41.82.66,53.11-50.45-17.93-50.45-17.93l-.14-.16A90.4,90.4,0,0,1,188.44,62.19Zm-60.95,58,1.47-4.53S173.57,129,171.62,135s-45.94-9.22-45.94-9.22Zm12.79,83.18-.32-.45.33.44Zm-4.66-6.87,0-.06q-.71-1.14-1.38-2.31l-.28-.5c-.46-.81-.91-1.62-1.34-2.44l-.18-.36c-.46-.88-.91-1.76-1.33-2.65l0,0a89.66,89.66,0,0,1-7.29-22.35l-.15-.78a90.63,90.63,0,0,1-1.41-15.82c0-1.34,0-2.69.1-4l.09-.12s44.29-1,50.72,15.78-32.64,42.45-32.64,42.45l-.18.07C138.63,201.16,137.08,198.87,135.62,196.51Zm4.68,6.87c1.46,1.93,3,3.8,4.58,5.61C143.28,207.18,141.76,205.31,140.3,203.38Zm9.85,11.1a90.77,90.77,0,0,0,17.52,13.1A90.77,90.77,0,0,1,150.15,214.48Zm91.54,20.15c-.65.22-1.31.43-2,.63A90.23,90.23,0,0,1,221.27,239c-.69.07-1.37.15-2.06.21-2.22.16-4.45.27-6.71.27a89.8,89.8,0,0,1-31.73-5.8l-.05-.08s12.76-42.42,30.67-43.36,30.29,44.16,30.29,44.16v.21Zm22.52-12-3.84,2.8s-28.26-37-23.16-40.71S269,219.21,269,219.21Zm18.87-17.17-.13,0S246.55,180.27,251.2,163s51.35-15.16,51.35-15.16l.2.05q-.06-3.68-.4-7.29c.27,2.85.43,5.74.43,8.66A89.86,89.86,0,0,1,283.08,205.48Z" style="fill:#fff" />
</g>
</svg>

SVG definition inheritance

Please look at eaExperiment. I want to make a definition which takes StartArrow definition and rotates it by 180 degrees.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="450" height="400" version="1.1">
<style type="text/css">
<![CDATA[
rect {fill:white; stroke: black; stroke-width: 1;}
text {fill: black; font-family: sans-serif; font-size: 10pt}
line {stroke:black; stroke-width:2}
]]>
</style>
<defs>
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
</marker>
<use id="eaExperiment" href="#StartArrow" transform="rotate(180)" />
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " transform="rotate(180)" />
</marker>
<svg id="Box">
<rect width="100" height="85" x="1" y="1" />
<text x="5" y="20">The box</text>
<svg x="10" y="25">
<rect width="70" height="50" x="1" y="1" />
<text x="5" y="20">Box</text>
<text x="5" y="40">Contents</text>
</svg>
</svg>
</defs>
<svg>
<svg x="10" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Data</text>
<text x="5" y="40">source</text>
</svg>
<svg x="150">
<use href="#Box" y="1" />
<use href="#Box" y="100" />
<use href="#Box" y="200" />
</svg>
<svg x="300" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Database</text>
<text x="5" y="40">server</text>
</svg>
<line x1="100" y1="120" x2="148" y2="40" style="marker-end:url(#EndArrow)" />
<line x1="110" y1="150" x2="147" y2="150" style="marker-end:url(#EndArrow)" />
<line x1="100" y1="170" x2="148" y2="240" style="marker-end:url(#EndArrow)" />
<line x1="254" y1="40" x2="297" y2="120" style="marker-start:url(#StartArrow); marker-end:url(#EndArrow)" />
<line x1="250" y1="150" x2="297" y2="150" style="marker-start:url(#eaExperiment); marker-end:url(#EndArrow)" />
<line x1="250" y1="240" x2="297" y2="170" style="marker-end:url(#EndArrow)" />
</svg>
</svg>
I am definitely doing it wrong, but what is the right way?

You need separate <marker> elements, but their content can be reused with <use> elements. For example like this:
<defs>
<path id="arrow" style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<use xlink:href="#arrow" />
</marker>
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<use xlink:href="#arrow" transform="rotate(180)" />
</marker>
</defs>
(While the use of the xlink namespace with href is deprecated and also from a practical perspective no longer needed in current browsers, I tend to still use it for the sake of other renderers, Inkscape for example.)

Alpha Transparent Gradient in Inline SVG Defs Element

I have this CODEPEN and here are my issues:
I am not understanding why the gradient I applied and referenced as my mask fill like so, doesn't render as it should. It should go from fully opaque to fully transparent. For the gradient I am using: http://angrytools.com/gradient/?0_800080,100_450045&0_0,100_100&l_180:
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" />
</mask>
In addition I don't understand why if I remove the fill="blue" attribute from my use element like so:
<use xlink:href="#myText" mask="url(#myMask)" />
The text appears black as if no gradient was applied. The gradient I defined is purple..
Thanks!

if you just want to apply your gradient to your text, there is no need to use masks, because gradients support the stop-opacity property.
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" style="stop-color:rgb(128,0,128);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(69,0,69);stop-opacity:1" />
</linearGradient>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<use xlink:href="#myText" fill="url(#lgrad)" />
</svg>
you only need masks if you want to seperate the opacity from your fills:
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<g mask="url(#myMask)">
<use xlink:href=" #myText" transform="translate(0,-50) " fill="red " />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>
masks turn colors into opacity information. going from black(totally transparent) to white (totally opaque)
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="50%" height="50%" fill="white" />
<rect x="50%" y="0" width="50%" height="50%" fill="#333" />
<rect x="0%" y="50%" width="50%" height="50%" fill="#aaa" />
<rect x="50%" y="50%" width="50%" height="50%" fill="white" />
<circle cx="50%" cy="50%" r="15%" fill="black" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="beige" />
<g mask="url(#myMask)">
<use xlink:href="#myText" transform="translate(0,-50)" fill="red" />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>

Add shadow to an SVG icon

i try to create two svg-icons
one with a shadow
and one with an inset-shadow
I tried many solutions but the shadow from my icon looks the hole time "wrong".
I dont get it. Can somebody help me please.
I create a preview with photoshop, so u can better understand what i need.
FIDDLE HERE
http://jsfiddle.net/7dghx0tr/
svg
<defs>
<radialGradient id="rgrad" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:#87e0fd;stop-opacity:1" />
<stop offset="100%" style="stop-color:#05abe0;stop-opacity:1" />
</radialGradient>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="#000000"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<style type="text/css" >
<![CDATA[
* { stroke: #006584;
stroke-width: 0.3;
fill:url(#rgrad);}
path { stroke: #666666;
stroke-width: 0.1;
filter:url(#drop-shadow);}
]]>
</style>
</defs>
<g>
<path d="M33.437,13.872C30.938,9.97,41.322,4.599,34.753,0.46c-1.508-0.944-3.168,1.32-1.572,2.322
c3.627,2.279-5.914,6.629-1.999,12.745C32.181,17.08,34.434,15.431,33.437,13.872z"/>
<path d="M40.748,13.872c-2.507-3.914,7.894-9.268,1.314-13.412c-0.802-0.504-1.909-0.041-2.162,0.841
c-0.652,2.274,3.575,0.756-0.135,5.835c-1.995,2.729-3.094,5.551-1.275,8.392C39.503,17.089,41.732,15.412,40.748,13.872z"/>
<path d="M26.086,13.872C23.578,9.955,33.99,4.608,27.401,0.46c-1.503-0.946-3.17,1.319-1.572,2.322
c3.601,2.263-5.892,6.665-1.999,12.745C24.833,17.08,27.08,15.434,26.086,13.872z"/>
<path d="M31.563,33.913c15.729,0,24.001-4.011,24.001-7.331c0-3.832-10.432-7.489-23.49-7.322
c-13.082-0.168-23.489,3.5-23.489,7.322C8.585,30.123,17.818,33.913,31.563,33.913z M31.87,21.226c0.048,0,0.096,0,0.145,0.002
v0.001c0.02,0,0.04-0.001,0.06-0.001c0.021,0,0.04,0.001,0.06,0.001v-0.001c0.049-0.001,0.097-0.002,0.145-0.002
c9.891,0,19.903,1.744,19.903,5.075c0,4.3-15.53,5.176-20.048,5.074v-0.001c0,0-0.118,0-0.119,0v0.001
c-4.641,0.106-20.046-0.805-20.046-5.074C11.969,22.969,21.979,21.226,31.87,21.226z"/>
<path d="M17.636,28.765l0.08-4.949c-2.973,0.763-4.62,1.697-4.62,2.484C13.096,27.081,14.714,28.006,17.636,28.765z"/>
<path d="M24.491,22.697c-1.673,0.164-3.178,0.376-4.511,0.625l-0.094,5.941c1.332,0.251,2.84,0.468,4.516,0.634L24.491,22.697z"/>
<path d="M31.258,22.361c-1.595,0.012-3.098,0.067-4.51,0.157l-0.094,7.561c1.41,0.092,2.914,0.148,4.509,0.162L31.258,22.361z"/>
<path d="M56.106,28.697c-0.004-0.068-0.022-0.134-0.03-0.202c-3.37,5.298-17.273,6.637-23.942,6.539v-0.002c0,0-0.117,0-0.119,0
v0.002c-8.507,0.125-20.9-1.76-23.941-6.539c-0.009,0.068-0.027,0.134-0.03,0.202c-2.588,0.566-3.726,1.76-3.654,3.796
c0.061,1.724,2.262,3.215,5.128,4.063c1.798,4.475,5.129,8.107,9.418,10.506l-6.173,14.399c-0.369,0.857,0.029,1.854,0.889,2.221
c0.216,0.092,0.442,0.137,0.665,0.137c0.656,0,1.28-0.384,1.555-1.024l6.126-14.29c5.895,2.286,13.754,2.481,20.156,0l6.126,14.29
c0.274,0.641,0.898,1.024,1.555,1.024c0.223,0,0.449-0.045,0.665-0.137c0.86-0.367,1.259-1.363,0.89-2.221l-6.174-14.399
c4.289-2.398,7.619-6.031,9.419-10.506c2.865-0.848,5.065-2.339,5.128-4.063C59.831,30.457,58.694,29.263,56.106,28.697z
M7.219,32.812c-0.049-0.926,0.094-1.466,0.917-1.815c0.115,1.139,0.338,2.233,0.625,3.297C7.835,33.934,7.25,33.442,7.219,32.812z
M55.388,34.294c0.288-1.064,0.511-2.159,0.626-3.297c0.821,0.349,0.965,0.889,0.916,1.815
C56.898,33.442,56.313,33.934,55.388,34.294z"/>
<path d="M51.054,26.3c0-0.787-1.647-1.722-4.62-2.484l0.079,4.949C49.435,28.006,51.054,27.081,51.054,26.3z"/>
<path d="M44.262,29.262l-0.093-5.941c-1.334-0.248-2.839-0.461-4.511-0.625l0.089,7.199C41.423,29.73,42.93,29.514,44.262,29.262z"
/>
<path d="M37.496,30.079l-0.095-7.561c-1.412-0.09-2.915-0.145-4.51-0.157l0.096,7.879C34.582,30.227,36.085,30.171,37.496,30.079z"
/>
</g>
</svg>

Well for a start, you are applying the filter to every path element in the file. You only want to apply it to the parent <g>.
Move the filter from <path> and apply it only to the <g>.
path {
stroke: #666666;
stroke-width: 0.1;
}
g {
filter:url(#drop-shadow);
}
I think you will begin to make progress then.

Rotate SVG group indefinitely 360 degrees without CSS or Java

This is my first time diving into SVG. Is it possible to rotate this group 360 indefinitely without css or javascript/jquery? So far I have it rotating in the top left corner but I cannot seem to figure out how to center it.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="576" height="576" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="seed" transform="translate(144,144)" stroke-width="2" stroke="black" fill="none" >
<circle cx="0" r="64" />
<circle cx="64" r="64" />
<circle cx="64" r="64" transform="rotate(60)" />
<circle cx="64" r="64" transform="rotate(120)" />
<circle cx="64" r="64" transform="rotate(180)" />
<circle cx="64" r="64" transform="rotate(240)" />
<circle cx="64" r="64" transform="rotate(300)" />
<circle cx="0" r="128" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 0 0; 360 0 0" dur="5s" repeatCount="indefinite" />
</g>
</svg>

Your animateTransform overwrites the transform on the <g> element. Looks like you want to provide an additional transform which you would with the attribute additive="sum"
<svg width="576" height="576" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="seed" transform="translate(144,144)" stroke-width="2" stroke="black" fill="none" >
<circle cx="0" r="64" />
<circle cx="64" r="64" />
<circle cx="64" r="64" transform="rotate(60)" />
<circle cx="64" r="64" transform="rotate(120)" />
<circle cx="64" r="64" transform="rotate(180)" />
<circle cx="64" r="64" transform="rotate(240)" />
<circle cx="64" r="64" transform="rotate(300)" />
<circle cx="0" r="128" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 0 0; 360 0 0" dur="5s" additive="sum" repeatCount="indefinite" />
</g>
</svg>

PaEDIT: My bad you probally mean JavaScript.
Okay you can calculate the center with JavaScript and a nice SVG-method called getBBox();
A method to return center of SVG-elements so your should also be possible. Okay piece of code
var svg = {
getCenterPosition: function(elem) {
// use the native SVG interface to get it's boundingBox
var bbox = elem.getBBox();
// return the center of the bounding box
return {
px: (bbox.x + bbox.width / 2).toFixed(2),
py: (bbox.y + bbox.height / 2).toFixed(2)
};
}
}
svg.getCenterPosition(yourGElementAsParameter); will return the center-coordinates. (web developer console or Firebug or something) Then you can set these coordinates in your attributes but don't alter the viewbox or anything it will now rotate around it's center.

Resources