SVG Modified with Query String

In this example below you will see how to do a SVG Modified with Query String with some HTML / CSS and Javascript

Create one SVG that allows you to change colours by changing query string. SVG has code in it to break it down.

Thumbnail
This awesome code was written by jnowland, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jnowland ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG Modified with Query String</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
  
  
</head>

<body>

  <img src="http://jamesnowland.com/demo/svg/html5.min.svg" alt="Default SVG" />

<img src="http://jamesnowland.com/demo/svg/html5.min.svg?bg=FF6138&stroke=00A388&badge-stroke=79BD8F&banners=79BD8F&badge-bg=FFFF9D&logo-circle=FF6138" alt="SVG With query strings" />

<object type="image/svg+xml" data="http://jamesnowland.com/demo/svg/html5.min.svg?bg=FF6138&stroke=00A388&badge-stroke=79BD8F&banners=79BD8F&badge-bg=FFFF9D&logo-circle=FF6138"></object>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jnowland/svg-modified-with-query-string-Aaphy */
// Javascript doesn't fire on SVGs unless you view them direct

// Update: or you put them in an object tag.

Comments