SVG icons coloured using js and hash

Developer
Niels Oeltjen
Size
2,574 Kb
Views
30,360
  1. SVG icons coloured using js and hash Previews
  2. SVG icons coloured using js and hash HTML Codes
  3. SVG icons coloured using js and hash CSS Codes
  4. SVG icons coloured using js and hash JS Codes

How do I make an svg icons coloured using js and hash?

Nice technique for colouring svg image. You can append the url of the svg with a hash, and parse location.hash with js to apply a hex value. Icon from SS Standard.. What is a svg icons coloured using js and hash? How do you make a svg icons coloured using js and hash? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

SVG icons coloured using js and hash Previews
IQ Test

SVG icons coloured using js and hash - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG icons coloured using js and hash </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://codepen.io/NielsOeltjen/pen/mWqKev.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>SVG icons coloured using js and hash</h2>
<p> We can append the SVG src with a HEX value. Try changing values in the HTML pane. Broken in some browsers.
</p>
<div class="icons"> <h4>Using <code>iframe</code> tag</h4> <!-- These are the same image. Change the hex value in the url to colour the SVG --> <iframe src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#FC237A" width="128" height="96"></iframe> <iframe src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#00F2FF" width="128" height="96"></iframe>
</div>
<!--CURRENTLY BROKEN -->
<p><code>embed</code> and <code>object</code> used to work but now not functional. I haven't had a chance to investigate</p>
<div class="icons"> <h4>Using <code>object</code> tag</h4> <!-- These are the same image. Change the hex value in the url to colour the SVG --> <object type="image/svg+xml" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#FC237A"></object> <object type="image/svg+xml" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#00F2FF"></object>
</div>
<div class="icons"> <h4>Using <code>embed</code> tag</h4> <!-- These are the same image. Change the hex value in the url to colour the SVG --> <embed type="image/svg+xml" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#FC237A"/> <embed type="image/svg+xml" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#00F2FF"/>
</div>
<p> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg" target="_blank">Here's the svg file</a>
</p>
<p> <a href="https://twitter.com/scottjehl/statuses/326453680243097601" target="_blank">How Scott Jehl did it</a>
</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG icons coloured using js and hash - Script Codes CSS Codes

object { -moz-border-radius: 4px / 4px; -webkit-border-radius: 4px 4px; border-radius: 4px / 4px;
}
.icons { padding-top: 2em; padding-bottom: 3em;
}
h4 { margin-bottom: 2em;
}

SVG icons coloured using js and hash - Script Codes JS Codes

/* https://twitter.com/scottjehl/statuses/326453680243097601 */
SVG icons coloured using js and hash - Script Codes
SVG icons coloured using js and hash - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 4.5
Size 2,574 Kb
Views 30,360
Do you need developer help for SVG icons coloured using js and hash?

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!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Sun
Nice outline hover effect
Layout states using jQuery and Data Attributes
Semantic vertical centering
Animated background colours
Prose.io repo icon
Pretty css spinner
Emoji selectors
Button toggle box
Sweet star loader
Create amazing captions 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!