SVG not rendering correctly on iOS Safari & Chrome - svg
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>
Related
How to add image to nodes in Cytoscape
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
Masking SVG with blur produces ugly results
I have rectangles / paths as rectangles with a glow effect. That works well as long as I do not mask the inner part (i.e. hiding either the filling or the glowing inside of the rectangles). Masking part of the objects produces some ugly effect of the previously smooth glow. So, applying the mask seems to render the previous "image" somehow. Is there a way to avoid this? If not, are there alternatives? <svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%"> <feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood> <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite> <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology> <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur> <feMerge> <feMergeNode in="blurred"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <mask id="Mask1"> <rect x="-100" y="-100" width="250" height="250" fill="white" /> <rect x="3" y="3" width="34" height="34" fill="black" /> </mask> <mask id="Mask2"> <rect x="-100" y="-100" width="250" height="250" fill="white" /> <rect x="3" y="3" width="34" height="34" fill="black" /> </mask> </defs> <g transform="translate(20,20)"> <rect x="0" y="0" width="40" height="40" fill="#00e4ff"/> <rect transform="translate(60,0)" x="0" y="0" width="40" height="40" fill="#00e4ff" style="filter:url(#cyan-glow)"/> <rect transform="translate(120,0)" x="0" y="0" width="40" height="40" fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/> <path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff" stroke-width="3" fill="none"/> <path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff" stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/> <path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff" stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/> </g> </svg>
Just make the masks bigger. You'd also be better off making the filter smaller. The huge filter size is why your SVG is very slow to render. <svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%"> <feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood> <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite> <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology> <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur> <feMerge> <feMergeNode in="blurred"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <mask id="Mask1" x="-40%" y="-40%" width="180%" height="180%"> <rect x="-100" y="-100" width="250" height="250" fill="white" /> <rect x="3" y="3" width="34" height="34" fill="black" /> </mask> <mask id="Mask2" x="-40%" y="-40%" width="180%" height="180%"> <rect x="-100" y="-100" width="250" height="250" fill="white" /> <rect x="3" y="3" width="34" height="34" fill="black" /> </mask> </defs> <g transform="translate(20,20)"> <rect x="0" y="0" width="40" height="40" fill="#00e4ff"/> <rect transform="translate(60,0)" x="0" y="0" width="40" height="40" fill="#00e4ff" style="filter:url(#cyan-glow)"/> <rect transform="translate(120,0)" x="0" y="0" width="40" height="40" fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/> <path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff" stroke-width="3" fill="none"/> <path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff" stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/> <path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff" stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/> </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.)
Changeing an SVG from 238 to 266 and now I'm stuck
This was originally 238, I want to change it to 266, and now I'm stuck. I've done this before, but I forgot how to do it. I know 7 goes into 266 38 times. See, I forgot how to do all this math, how you're supposed to calculate it. I'm confused now. It should all fit evenly I think, or does it not? <svg width="266" height="266" viewBox="0 0 266 266"> <rect x="0" y="0" width="266" height="266" fill="blue" /> <rect x="7" y="7" width="224" height="224" fill="black" /> <rect x="14" y="14" width="210" height="210" fill="red" /> <rect x="21" y="21" width="196" height="196" fill="black" /> <rect x="28" y="28" width="182" height="182" fill="yellow" /> <rect x="35" y="35" width="168" height="168" fill="black" /> <rect x="42" y="42" width="154" height="154" fill="orange" /> <rect x="49" y="49" width="140" height="140" fill="black" /> <rect x="56" y="56" width="126" height="126" fill="lime" /> <rect x="63" y="63" width="112" height="112" fill="black" /> <rect x="70" y="70" width="98" height="98" fill="teal" /> <rect x="77" y="77" width="84" height="84" fill="black" /> <rect x="84" y="84" width="70" height="70" fill="silver" /> <rect x="91" y="91" width="56" height="56" fill="black" /> <rect x="98" y="98" width="42" height="42" fill="#1155cc" /> <rect x="105" y="105" width="28" height="28" fill="black" /> <rect x="112" y="112" width="14" height="14" fill="gold" /> </svg>
Assuming the original looked like this: <svg width="238" height="238" viewBox="0 0 238 238"> <rect x="0" y="0" width="238" height="238" fill="blue" /> <rect x="7" y="7" width="224" height="224" fill="black" /> <rect x="14" y="14" width="210" height="210" fill="red" /> <rect x="21" y="21" width="196" height="196" fill="black" /> <rect x="28" y="28" width="182" height="182" fill="yellow" /> <rect x="35" y="35" width="168" height="168" fill="black" /> <rect x="42" y="42" width="154" height="154" fill="orange" /> <rect x="49" y="49" width="140" height="140" fill="black" /> <rect x="56" y="56" width="126" height="126" fill="lime" /> <rect x="63" y="63" width="112" height="112" fill="black" /> <rect x="70" y="70" width="98" height="98" fill="teal" /> <rect x="77" y="77" width="84" height="84" fill="black" /> <rect x="84" y="84" width="70" height="70" fill="silver" /> <rect x="91" y="91" width="56" height="56" fill="black" /> <rect x="98" y="98" width="42" height="42" fill="#1155cc" /> <rect x="105" y="105" width="28" height="28" fill="black" /> <rect x="112" y="112" width="14" height="14" fill="gold" /> </svg> Then all you have to do to scale it up to 266x266 is to update the width and height attributes. <svg width="266" height="266" viewBox="0 0 238 238"> Because the SVG has a viewBox, the browser will scale the contents automatically for you. <svg width="266" height="266" viewBox="0 0 238 238"> <rect x="0" y="0" width="238" height="238" fill="blue" /> <rect x="7" y="7" width="224" height="224" fill="black" /> <rect x="14" y="14" width="210" height="210" fill="red" /> <rect x="21" y="21" width="196" height="196" fill="black" /> <rect x="28" y="28" width="182" height="182" fill="yellow" /> <rect x="35" y="35" width="168" height="168" fill="black" /> <rect x="42" y="42" width="154" height="154" fill="orange" /> <rect x="49" y="49" width="140" height="140" fill="black" /> <rect x="56" y="56" width="126" height="126" fill="lime" /> <rect x="63" y="63" width="112" height="112" fill="black" /> <rect x="70" y="70" width="98" height="98" fill="teal" /> <rect x="77" y="77" width="84" height="84" fill="black" /> <rect x="84" y="84" width="70" height="70" fill="silver" /> <rect x="91" y="91" width="56" height="56" fill="black" /> <rect x="98" y="98" width="42" height="42" fill="#1155cc" /> <rect x="105" y="105" width="28" height="28" fill="black" /> <rect x="112" y="112" width="14" height="14" fill="gold" /> </svg>
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>