Inline SVG Fill and Stroke

Developer
Rob Levin
Size
3,420 Kb
Views
14,168
  1. Inline SVG Fill and Stroke Previews
  2. Inline SVG Fill and Stroke HTML Codes
  3. Inline SVG Fill and Stroke CSS Codes

How do I make an inline svg fill and stroke?

Shows the limitations of svgs exported with stroke and fill transparent with some workarounds.. What is a inline svg fill and stroke? How do you make a inline svg fill and stroke? This script and codes were developed by Rob Levin on 13 December 2022, Tuesday.

Inline SVG Fill and Stroke Previews
IQ Test

Inline SVG Fill and Stroke - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inline SVG Fill and Stroke </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;"><symbol viewBox="0 0 280 280" id="completed-copy-filled"><title>completed-copy-filled</title> <path d="M245,24.5h-21v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H98v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H35	c-17.5,0-31.5,14-31.5,31.5v189c0,17.5,14,31.5,31.5,31.5h210c17.5,0,31.5-14,31.5-31.5V56C276.5,38.5,262.5,24.5,245,24.5z M255.5,245c0,5.8-4.7,10.5-10.5,10.5H35c-5.8,0-10.5-4.7-10.5-10.5V87.5h229.8L255.5,245L255.5,245z"/> <g> <path d="M77,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5S66.5,8.2,66.5,14v31.5C66.5,52.5,71.2,56,77,56z"/> <path d="M203,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5S192.5,8.2,192.5,14v31.5C192.5,52.5,197.2,56,203,56z"/> </g> <g> <polygon points="198.3,120.2 191.3,114.3 186.7,119 173.8,130.7 171.5,134.2 159.8,145.8 148.2,157.5 135.3,169.2 123.7,182	112,193.7 92.2,172.7 86.3,168 79.3,173.8 68.8,184.3 79.3,194.8 92.2,207.7 103.8,219.3 112,227.5 122.5,217 129.5,210	134.2,205.3 147,193.7 158.7,182 170.3,169.2 186.7,152.8 198.3,141.2 208.8,130.7	"/> </g> </symbol><symbol viewBox="0 0 280 280" id="completed-copy-stroked-classes"><title>completed-copy-stroked-classes</title> <g> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M245,24.5h-21v21c0,11.7-9.3,21-21,21c-11.7,0-21-9.3-21-21v-21H98	v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H35c-17.5,0-31.5,14-31.5,31.5v189c0,17.5,14,31.5,31.5,31.5h210	c17.5,0,31.5-14,31.5-31.5V56C276.5,38.5,262.5,24.5,245,24.5z M255.5,245c0,5.8-4.7,10.5-10.5,10.5H35c-5.8,0-10.5-4.7-10.5-10.5	V87.5h229.8L255.5,245L255.5,245z"/> <path class="ibestrokin" fill="none" stroke="#000000" stroke-miterlimit="10" d="M77,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5	c-5.8,0-10.5,4.7-10.5,10.5v31.5C66.5,52.5,71.2,56,77,56z"/> <path class="ibestrokin" fill="none" stroke="#000000" stroke-miterlimit="10" d="M203,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5	c-5.8,0-10.5,4.7-10.5,10.5v31.5C192.5,52.5,197.2,56,203,56z"/> <polygon class="istrokeittotheeast" fill="none" stroke="#000000" stroke-miterlimit="10" points="198.3,120.2 191.3,114.3 186.7,119 173.8,130.7 171.5,134.2	159.8,145.8 148.2,157.5 135.3,169.2 123.7,182 112,193.7 92.2,172.7 86.3,168 79.3,173.8 68.8,184.3 79.3,194.8 92.2,207.7	103.8,219.3 112,227.5 122.5,217 129.5,210 134.2,205.3 147,193.7 158.7,182 170.3,169.2 186.7,152.8 198.3,141.2 208.8,130.7	"/> </g> </symbol><symbol viewBox="0 0 280 280" id="completed-copy-stroked"><title>completed-copy-stroked</title> <g> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M245,24.5h-21v21c0,11.7-9.3,21-21,21c-11.7,0-21-9.3-21-21v-21H98	v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H35c-17.5,0-31.5,14-31.5,31.5v189c0,17.5,14,31.5,31.5,31.5h210	c17.5,0,31.5-14,31.5-31.5V56C276.5,38.5,262.5,24.5,245,24.5z M255.5,245c0,5.8-4.7,10.5-10.5,10.5H35c-5.8,0-10.5-4.7-10.5-10.5	V87.5h229.8L255.5,245L255.5,245z"/> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M77,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5	c-5.8,0-10.5,4.7-10.5,10.5v31.5C66.5,52.5,71.2,56,77,56z"/> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M203,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5	c-5.8,0-10.5,4.7-10.5,10.5v31.5C192.5,52.5,197.2,56,203,56z"/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="198.3,120.2 191.3,114.3 186.7,119 173.8,130.7 171.5,134.2	159.8,145.8 148.2,157.5 135.3,169.2 123.7,182 112,193.7 92.2,172.7 86.3,168 79.3,173.8 68.8,184.3 79.3,194.8 92.2,207.7	103.8,219.3 112,227.5 122.5,217 129.5,210 134.2,205.3 147,193.7 158.7,182 170.3,169.2 186.7,152.8 198.3,141.2 208.8,130.7	"/> </g> </symbol><symbol viewBox="0 0 280 280" id="hand-filled"><title>hand-filled</title> <path fill="red" d="M245,24.5h-21v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H98v21c0,11.7-9.3,21-21,21s-21-9.3-21-21v-21H35	c-17.5,0-31.5,14-31.5,31.5v189c0,17.5,14,31.5,31.5,31.5h210c17.5,0,31.5-14,31.5-31.5V56C276.5,38.5,262.5,24.5,245,24.5z M255.5,245c0,5.8-4.7,10.5-10.5,10.5H35c-5.8,0-10.5-4.7-10.5-10.5V87.5h229.8L255.5,245L255.5,245z"/> <g> <path d="M77,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5S66.5,8.2,66.5,14v31.5C66.5,52.5,71.2,56,77,56z"/> <path d="M203,56c5.8,0,10.5-4.7,10.5-10.5V14c0-5.8-4.7-10.5-10.5-10.5S192.5,8.2,192.5,14v31.5C192.5,52.5,197.2,56,203,56z"/> </g> <g> <polygon points="198.3,120.2 191.3,114.3 186.7,119 173.8,130.7 171.5,134.2 159.8,145.8 148.2,157.5 135.3,169.2 123.7,182	112,193.7 92.2,172.7 86.3,168 79.3,173.8 68.8,184.3 79.3,194.8 92.2,207.7 103.8,219.3 112,227.5 122.5,217 129.5,210	134.2,205.3 147,193.7 158.7,182 170.3,169.2 186.7,152.8 198.3,141.2 208.8,130.7	"/> </g> </symbol>
</svg>
<div> <p>Originally filled. Easiest to work with. Simply apply fill/stroke as desired in CSS to the instance</p> <svg class="filled-instance"> <use xlink:href="#completed-copy-filled" /> </svg>
</div>
<div> <p>Originally stroked with no fill using [stroke] attribute in CSS to &ldquo;reach-in&rdquo; to the SVG</p> <svg class="stroked-instance"> <use xlink:href="#completed-copy-stroked" /> </svg>
</div>
<div> <p>Originally filled, but fill turned off</p> <svg class="filled-instance-off"> <use xlink:href="#completed-copy-filled" /> </svg>
</div>
<div> <p>Manually adding classes to the source SVG allows us to style to those in CSS</p> <svg> <use xlink:href="#completed-copy-stroked-classes" /> </svg>
</div>
<div> <p>Hand Filled–Note that the part of the filled area that's been defined with a fill attribute (red), will NOT get overriden when we apply CSS to the SVG cloned instance. The parts that are working are cyan.</p> <svg class="hand-filled-instance"> <use xlink:href="#hand-filled" /> </svg>
</div>
</body>
</html>

Inline SVG Fill and Stroke - Script Codes CSS Codes

.stroked-instance { stroke: green; fill: red;
}
.filled-instance { stroke: #cc8ac1; stroke-width: 5px; fill: #ebd1e7;
}
.filled-instance-off { stroke: #d08aaf; stroke-width: 5px; fill: transparent;
}
symbol#completed-copy-stroked [stroke] { stroke: #dd6435; stroke-width: 5px;
}
.ibestrokin { stroke: magenta; stroke-width: 5px;
}
.istrokeittotheeast { stroke: green; stroke-width: 7px;
}
.hand-filled-instance { fill: cyan; stroke: #cc0000; stroke-width: 5px;
}
Inline SVG Fill and Stroke - Script Codes
Inline SVG Fill and Stroke - Script Codes
Home Page Home
Developer Rob Levin
Username roblevin
Uploaded December 13, 2022
Rating 3.5
Size 3,420 Kb
Views 14,168
Do you need developer help for Inline SVG Fill and Stroke?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob Levin (roblevin) Script Codes
Name
Horizontal Formatting
Backed by UXR
Starter SVG
A Pen by Rob Levin
Simple Snap.svg Example
Collapsing Margins
Vertical Formatting
Absolute fixed header footer with scrolling main content
SVG Frontend Masters Study Notes
Zero Specificity vs No Specificity
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!