Skip to content

Instantly share code, notes, and snippets.

@riccardoscalco

riccardoscalco/image.svg

Created May 8, 2020 07:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save riccardoscalco/acebd92edce01d155f5def1baa73990a to your computer and use it in GitHub Desktop.
Save riccardoscalco/acebd92edce01d155f5def1baa73990a to your computer and use it in GitHub Desktop.
Download ZIP
Example of custom textures
Display the source blob
Display the rendered blob
Raw
image.svg
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=yes">
</head>
<body>
<main class="main-layout">
<section>
<h2>Custom Image</h2>
<img width="300px" src="image.svg">
</section>
<section>
<h2>Using CSS on HTML elements</h2>
<div style="
width: 300px;
height: 300px;
border: 1px solid black;
background-image: url('image.svg');
background-size: 10%;
"></div>
<p>Change size</p>
<div style="
width: 300px;
height: 300px;
border: 1px solid black;
background-image: url('image.svg');
background-size: 20%;
"></div>
<p>Have a look at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">https://developer.mozilla.org/en-US/docs/Web/CSS/background</a> for more options.</p>
</section>
<section>
<h2>On SVG elements</h2>
<svg style="border: 1px solid black;" width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!--
Insert in the <pattern> element the SVG image.
Note that pattern viewBox attribute should match the image viewBox: "0, 0, 24, 24"
-->
<pattern id="smile1" viewBox="0,0,24,24" width="10%" height="10%">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
</pattern>
</defs>
<rect
width="300"
height="300"
fill="url(#smile1)"
></rect>
</svg>
<p>Play with pattern attributes <code>width</code> and <code>height</code>:</p>
<svg style="border: 1px solid black;" width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!--
Insert in the <pattern> element the SVG image.
Note that pattern viewBox attribute should match the image viewBox ("0, 0, 24, 24").
-->
<pattern id="smile2" viewBox="0,0,24,24" width="5%" height="5%">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
</pattern>
</defs>
<rect
width="300"
height="300"
fill="url(#smile2)"
></rect>
</svg>
<p>Play with pattern attribute <code>viewBox</code> to add padding:</p>
<svg style="border: 1px solid black;" width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smile3" viewBox="0,0,48,48" width="10%" height="10%">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
</pattern>
</defs>
<rect
width="300"
height="300"
fill="url(#smile3)"
></rect>
</svg>
<p>Play with path attribute <code>transform</code> to translate the image, for example placing the image at the center of the viewBox:</p>
<svg style="border: 1px solid black;" width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smile4" viewBox="0,0,48,48" width="10%" height="10%">
<path transform="translate(12, 12)" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
</pattern>
</defs>
<rect
width="300"
height="300"
fill="url(#smile4)"
></rect>
</svg>
</section>
<section>
<h2>Using JS</h2>
<p>We are going to apply patters to SVG elements using D3.js. We can repeat what we did in the previous section, here we do the simplest exercise.</p>
<div id="example"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
const svg = d3
.select("#example")
.append("svg")
.attr("width", "300px")
.attr("height", "300px")
.attr("viewBox", "0 0 300 300");
const pattern = svg
.append("pattern")
.attr("id", "smileJS")
.attr("viewBox", "0,0,24,24")
.attr("width", "10%")
.attr("height", "10%");
pattern
.append("path")
.attr("d", "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z");
svg
.append("rect")
.attr("width", 300)
.attr("height", 300)
.attr("fill", "url('#smileJS')");
</script>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment