How do I use an svg file as a checkbox? - javascript
I made an svg image in Adobe Illustrator (id="gray-x-button"), and I want to use the svg code as a custom shaped checkbox. Once the user clicks on the checkbox, I want the checkbox to change to a different svg image I made in Illustrator (id="red-x-button"). How would I do that using HTML, CSS, and Javascript? I'm very new to web development, so I've been having trouble even knowing where to begin. All I have right now is my svg code that I exported from Illustrator, which I will post below.
<svg id="gray-x-button" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">s
<defs>
<style>.cls-1-g{fill:url(#linear-gradient);}.cls-2-g{opacity:0.25;}.cls-3-g{fill:#fff;}</style>
<linearGradient id="linear-gradient" x1="187.42" y1="187.55" x2="317.1" y2="317.23" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d1d1d1"/>
<stop offset="0.62" stop-color="#acadaf"/>
<stop offset="1" stop-color="#939598"/>
</linearGradient>
</defs>
<path id="Cross-g" class="cls-1-g" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
<g id="Depth-g" class="cls-2-g">
<path class="cls-3-g" d="M305.08,180.13a4.2,4.2,0,0,1,3,1.25l-2-2a4.25,4.25,0,0,0-6,0l-47.81,47.8-47.81-47.8a4.25,4.25,0,0,0-6,0l-19.19,19.18a4.26,4.26,0,0,0,0,6l2,2a4.26,4.26,0,0,1,0-6l19.19-19.18a4.25,4.25,0,0,1,6,0l47.81,47.8,47.81-47.8A4.2,4.2,0,0,1,305.08,180.13Z" transform="translate(-176 -176.13)"/>
<polygon class="cls-3-g" points="149.28 124.07 103.47 78.27 149.28 124.07 149.28 124.07"/>
<path class="cls-3-g" d="M227.8,256.13l-2-2-46.64,46.64a4.16,4.16,0,0,0,0,5.88l18.72,18.72h0l-16.77-16.77a4.16,4.16,0,0,1,0-5.88Z" transform="translate(-176 -176.13)"/>
</g>
</svg>
<svg id="red-x-button" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">
<defs>
<style>.cls-1-r{fill:#231f20;}.cls-2-r{fill:url(#radial-gradient);}</style>
<radialGradient id="radial-gradient" cx="252.26" cy="252.39" r="74.26" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f7941d"/>
<stop offset="0.2" stop-color="#f4701f"/>
<stop offset="0.43" stop-color="#f14c21"/>
<stop offset="0.65" stop-color="#ef3123"/>
<stop offset="0.85" stop-color="#ed2224"/>
<stop offset="1" stop-color="#ed1c24"/>
</radialGradient>
</defs>
<path id="Cross-r" class="cls-1-r" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
<path class="cls-2-r" d="M303.08,326.66a4.24,4.24,0,0,1-3-1.25L252.26,277.6l-47.81,47.81a4.25,4.25,0,0,1-6,0l-19.19-19.19a4.26,4.26,0,0,1,0-6l47.81-47.81-47.81-47.81a4.26,4.26,0,0,1,0-6l19.19-19.19a4.26,4.26,0,0,1,6,0l47.81,47.8,47.81-47.81a4.26,4.26,0,0,1,6,0l19.19,19.18a4.26,4.26,0,0,1,0,6l-47.81,47.81,47.81,47.81a4.25,4.25,0,0,1,0,6l-19.19,19.19A4.24,4.24,0,0,1,303.08,326.66Z" transform="translate(-176 -176.13)"/>
</svg>
I would prefer to use inline svg code so I can modify it with CSS later. Thanks!
You can find the right answer and further information on this relative post
style-a-checkbox-using-css
Related
Multiple colors in one single character(svg)
I'm looking for a solution in SVG that enables several colors in one single character without any visual gradients. Here is an example of how I want the result to look like Here is the best solution that I can come up with. This works perfect with only 2 colors, but more colors doesn't give the result that I want. <svg width="200" height="80" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="bicolored" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="33%" stop-color="blue"/> <stop offset="33%" stop-color="red"/> <stop offset="66%" stop-color="orange"/> </linearGradient> </defs> <text font-family="Arial" font-size="35" font-weight="bold" x="0" y="45" fill="url(#bicolored)">6 </text> </svg>
Use multiple stops of the same colour if you don't want gradients. <svg width="200" height="80" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="bicolored" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="33%" stop-color="blue"/> <stop offset="33%" stop-color="red"/> <stop offset="66%" stop-color="red"/> <stop offset="66%" stop-color="orange"/> </linearGradient> </defs> <text font-family="Arial" font-size="35" font-weight="bold" x="0" y="45" fill="url(#bicolored)">6 </text> </svg>
Is the SVG def element editable
I've got an svg with a defs element, like so: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()"> <defs> <linearGradient id="grad" x1="174.62" y1="-20.2" x2="75.38" y2="350.2" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#d4af37"/> <stop offset="0.14" stop-color="#fefdfb"/> <stop offset="0.27" stop-color="#d6b23f"/> <stop offset="0.45" stop-color="#816e26"/> <stop offset="0.59" stop-color="#d6b23f"/> <stop offset="0.82" stop-color="#d6b23f"/> <stop offset="0.91" stop-color="#fff"/> <stop offset="1" stop-color="#d6b23f"/> </linearGradient> </defs> <title>StickerBorder</title> <rect x="5" y="292.04" width="240" height="30.58" style="fill: #aa4c4e;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/> <polygon points="6.71 4 6.71 53.09 47.54 53.09 68.22 32.41 245 32.41 246.28 4 6.71 4" style="fill: #2680b8"/> <polyline points="5 54.09 47.06 54.09 67.51 33.41 242.31 33.41" style="fill: none;stroke: #184c66;stroke-miterlimit: 10;stroke-width: 4px"/> <rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#grad)"/> <circle cx="196.64" cy="292.04" r="21.94" style="fill: #fff;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/> <text transform="translate(188.7 304.34)" style="font-size: 28.58350944519043px;fill: #1d1d1b;font-family: KG Second Chances Sketch">7</text> </svg> I'm appending a couple of children to this via javascript like so : <lineargradient id="glossgrad" x1="22.3" y1="342.88" x2="227.7" y2="-12.88" gradientunits="userSpaceOnUse"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ff0000"></stop> <stop offset="0.4" stop-color="#ff0000"></stop> </lineargradient> <rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#glossgrad)"></rect> So the lineargradient "glossgrad" is being added to the defs element and the rect is being added to the svg element. My problem is, the new appended rect doesn't appear at all. However if I change the url of the rect to the original lineargradient url it appears. So my question is, does the 'defs' element not get updated once it has had it's initial load? Is it sort of cached or something?
I don't know how you append the new linear gradient definitions and rect element. But to answer your question, there are no issues in dynamically appending new elements to svg defs and using them.
Here is a working example:
var svg = document.getElementsByTagName("svg")[0];
var svgNS = svg.namespaceURI;
createGradient(svg,'glossgrad',[
{offset:'5%', 'stop-color':'#f60'},
{offset:'95%','stop-color':'#ff6'}
]);
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('x',60);
rect.setAttribute('y',80);
rect.setAttribute('width',50);
rect.setAttribute('height',50);
rect.setAttribute('fill','url(#glossgrad)');
svg.appendChild(rect);
function createGradient(svg,id,stops){
var grad = document.createElementNS(svgNS,'linearGradient');
grad.setAttribute('id',id);
for (var i=0;i<stops.length;i++){
var attrs = stops[i];
var stop = document.createElementNS(svgNS,'stop');
for (var attr in attrs){
if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr,attrs[attr]);
}
grad.appendChild(stop);
}
var defs = svg.querySelector('defs') ||
svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild);
return defs.appendChild(grad);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()">
<defs>
<linearGradient id="grad" x1="174.62" y1="-20.2" x2="75.38" y2="350.2" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d4af37"/>
<stop offset="0.14" stop-color="#fefdfb"/>
<stop offset="0.27" stop-color="#d6b23f"/>
<stop offset="0.45" stop-color="#816e26"/>
<stop offset="0.59" stop-color="#d6b23f"/>
<stop offset="0.82" stop-color="#d6b23f"/>
<stop offset="0.91" stop-color="#fff"/>
<stop offset="1" stop-color="#d6b23f"/>
</linearGradient>
</defs>
<title>StickerBorder</title>
<rect x="5" y="292.04" width="240" height="30.58" style="fill: #aa4c4e;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<polygon points="6.71 4 6.71 53.09 47.54 53.09 68.22 32.41 245 32.41 246.28 4 6.71 4" style="fill: #2680b8"/>
<polyline points="5 54.09 47.06 54.09 67.51 33.41 242.31 33.41" style="fill: none;stroke: #184c66;stroke-miterlimit: 10;stroke-width: 4px"/>
<rect x="5" y="5" width="240" height="320" style="fill: none;stroke-miterlimit: 10;stroke-width: 10px;stroke: url(#grad)"/>
<circle cx="196.64" cy="292.04" r="21.94" style="fill: #fff;stroke: #4f2426;stroke-miterlimit: 10;stroke-width: 4px"/>
<text transform="translate(188.7 304.34)" style="font-size: 28.58350944519043px;fill: #1d1d1b;font-family: KG Second Chances Sketch">7</text>
</svg>
Expand area of SVG
I'm new to using SVGs so I appreciate any patience with what may be a silly question. I have an SVG image of a cake-like-shape. Here is the code: <svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve"> <linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42"> <stop offset="0" style="stop-color:#F8E8B9"/> <stop offset="50%" style="stop-color:#E6C173"/> <stop offset="100%" style="stop-color:#F8E8B9"/> </linearGradient> <!-- Side of Cake --> <path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18 c0,10-32,18-71,18S0,27,0,18L0,48z"/> <g id="XMLID_5_"> <linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13"> <stop offset="0" style="stop-color:#E6C173;stop-opacity:1"/> <stop offset="1" style="stop-color:#F8E8B9"/> </linearGradient> <!-- Top of Cake --> <ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18"/> </g> </svg> This was created and exported in Illustrator. What I want to do is to reduce the width but not the height. It doesn't matter whether it is in JavaScript, CSS or any other method. Effectively, the cakes will stack whilst keeping the same visual perspective. From what I gather I just need to extend the length of the side of the cake path (labeled in comments), but am not able to find any way of doing so. It is very possible that I am way off in my guesses! I've done up a quick jsfiddle with the CSS from the answer below.
hi here i tried to manage this wAy you can check
.container {
postition: relative;
height: 100%;
width: 100%;
}
#Layer_1 {
position: absolute;
top: 95px;
}
#Layer_2 {
position: relative;
transform: scaleY(0.7);
transform: scaleX(0.7);
}
<div class="container">
<svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve">
<linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42">
<stop offset="0" style="stop-color:#F8E8B9"></stop>
<stop offset="50%" style="stop-color:#E6C173"></stop>
<stop offset="100%" style="stop-color:#F8E8B9"></stop>
</linearGradient>
<!-- Side of Cake -->
<path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18
c0,10-32,18-71,18S0,27,0,18L0,48z"></path>
<g id="XMLID_5_">
<linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13">
<stop offset="0" style="stop-color:#E6C173;stop-opacity:1"></stop>
<stop offset="1" style="stop-color:#F8E8B9"></stop>
</linearGradient>
<!-- Top of Cake -->
<ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18"></ellipse>
</g>
</svg>
<svg version="1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve">
<linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42">
<stop offset="0" style="stop-color:#F8E8B9"></stop>
<stop offset="50%" style="stop-color:#E6C173"></stop>
<stop offset="100%" style="stop-color:#F8E8B9"></stop>
</linearGradient>
<!-- Side of Cake -->
<path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18
c0,10-32,18-71,18S0,27,0,18L0,48z" style="transform: scaleY(0.7);"></path>
<g id="XMLID_5_">
<linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13">
<stop offset="0" style="stop-color:#E6C173;stop-opacity:1"></stop>
<stop offset="1" style="stop-color:#F8E8B9"></stop>
</linearGradient>
<!-- Top of Cake -->
<ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18" style="transform: scaleY(0.8);"></ellipse>
</g>
</svg>
</div>
you can check out on this Take a Look
a simple way would be using transform:scaleX() in the CSS on the entire SVG element:
//svg{transform:scaleX(0.6)}
svg{transform:scale(0.6,0.6)}//for uniforme scaling
<svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve">
<linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42">
<stop offset="0" style="stop-color:#F8E8B9"/>
<stop offset="50%" style="stop-color:#E6C173"/>
<stop offset="100%" style="stop-color:#F8E8B9"/>
</linearGradient>
<!-- Side of Cake -->
<path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18
c0,10-32,18-71,18S0,27,0,18L0,48z"/>
<g id="XMLID_5_">
<linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13">
<stop offset="0" style="stop-color:#E6C173;stop-opacity:1"/>
<stop offset="1" style="stop-color:#F8E8B9"/>
</linearGradient>
<!-- Top of Cake -->
<ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18"/>
</g>
</svg>
javascript + svg : get fill when it has been declared outside of a style
I want to replace a gradient for another in a svg so I need to iterate (probably recursively) over each svg item to get
I looked at the svg doc # MDN
https://developer.mozilla.org/fr/SVG/Element/ellipse
but it is broken (access denied, no exemple, lots of broken links)
and quite different of the one at MSDN
http://msdn.microsoft.com/en-us/library/ie/ff972071%28v=vs.85%29.aspx
so I search for any pointer on how to access fill property of a svg element however it has been defined.
something like a getComputedFill function
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/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:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
>
<defs>
<script>
<![CDATA[
function infothis(ref)
{
alert(ref + " " + ref.fill + " " + ref.fillOpacity); // why can't I get "url(#grad1)" and 0.5 when clicking ellipse1
//alert(ref.style.getPropertyValue("fill")); // somewhat okwhy can't I get "url(#grad2)" when clicking ellipse2
}
]]>
</script>
<linearGradient
dc:title="red black filter"
dc:rights="CC-BY"
dc:description="basic filter ranging from black to red"
id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,255);stop-opacity:1" />
</linearGradient>
<ellipse id="ellipse0" cx="150" cy="170" rx="85" ry="55" fill="url(#grad2)" />
</defs>
<ellipse id="ellipse1" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" fill-opacity="0.5" onclick="infothis(this)" />
<ellipse id="ellipse2" cx="100" cy="70" rx="85" ry="55" style="fill:url(#grad2)" onclick="infothis(this)" />
<use xlink:href="#ellipse0"/>
</svg>
How about this...
alert(document.defaultView.getComputedStyle(ref, null).getPropertyValue("fill"));
Apply Gradient to more than one element inside an SVG Element
I am attempting to create an arrow that looks like this using SVG elements: This is my attempt: As you can see the gradient gets applied to both the rect & the polygon in my SVG. Is there a way to replicate the gradient effect in the top image in my SVG? Maybe theres a CSS way to do this? Maybe I HAVE to use a path or single polygon element to create the arrow instead of a rect & polygon? <svg width="424" height="100"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" /> </radialGradient> </defs> <rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect> <polygon points="212,0 212,100 424,50" fill="url(#grad1)"></polygon> </svg>
you can "make" a single path from two shapes by grouping them then apply the gradient to the group <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="424" height="100" id="svg2996"> <defs> <radialGradient cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5" id="grad1"> <stop style="stop-color:#ffffff;stop-opacity:0" offset="0" /> <stop style="stop-color:#0d145d;stop-opacity:1" offset="1" /> </radialGradient> <radialGradient cx="212" cy="50" r="212" fx="212" fy="50" id="radialGradient3809" xlink:href="#grad1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.23584906,0,38.207547)" /> </defs> <g style="fill:url(#radialGradient3809);fill-opacity:1"> <rect width="212" height="50" rx="0" ry="0" x="0" y="25" /> <polygon points="424,50 212,0 212,100 " /> </g> </svg> codepen
I used two gradients to attempt to recreate what you were trying to do. You can adjust the center of the gradient to align with the edges of the shapes: <svg width="424" height="100"> <defs> <radialGradient id="grad1" cx="100%" cy="50%" r="100%" fx="100%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" /> </radialGradient> <radialGradient id="grad2" cx="0%" cy="50%" r="50%" fx="0%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" /> </radialGradient> </defs> <rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect> <polygon points="212,0 212,100 424,50" fill="url(#grad2)"></polygon> </svg> Demo Is there something wrong with a single polygon though? <svg width="424" height="100"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" /> </radialGradient> </defs> <polygon points="212,0 212,25 0,25 0,75, 212,75 212,100 424,50" fill="url(#grad1)"></polygon> </svg>