Skip to content

Instantly share code, notes, and snippets.

@riccardoscalco

riccardoscalco/image.svg

Created May 8, 2020 07:50
Show Gist options
  • 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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