# data[].attributes.body
- Images
- Icons
- Music
- Video
- Fonts

Gist

# data[].attributes.attachment_link.title
A list of openly licensed digital assets

# data[].attributes.attachment_link.description
A list of openly licensed digital assets. GitHub Gist: instantly share code, notes, and snippets.

# data[].attributes.body
Some starter links, tips, tricks and common editing tools.

Gist

# data[].attributes.attachment_link.description
SVG: Getting started. GitHub Gist: instantly share code, notes, and snippets.

# data[].attributes.headline
Three popular methods of adding SVGs to a web page

# data[].attributes.subject
Three popular methods of adding SVGs to a web page

# data[].attributes.body
1. HTML img element
2. CSS background image
3. Inline SVG

Gist
Codepen
Activity

# data[].attributes.attachment_link.description
SVG: 3 ways to insert an SVG. GitHub Gist: instantly share code, notes, and snippets.

# data[].attributes.body
The viewBox attribute is the trickiest part about understanding SVGs. The following resources do a great job of explaining it:

Article: Understanding the viewBox by Amelia Wattenberger

Video: What are SVG viewport and viewBox? by Kevin Powell

# data[].attributes.body
Figma is a popular free, web-based vector editor
- Gist: Figma overview
- Tutorial: How to Work with SVGs in Figma, HTML, and CSS by Build UX

# data[].attributes.attachment_link.title
How to Work with SVGs in Figma, HTML, and CSS | Optimized SVG Icons

# data[].attributes.body
A key advantage to SVGs is their ability to be styled with CSS. Add a colour scheme to the following SVG pinball diagram.

Gist
Codepen

# data[].attributes.attachment_link.title
Activity: Add a colour scheme to an inline SVG

# data[].attributes.attachment_link.description
Activity: Add a colour scheme to an inline SVG. GitHub Gist: instantly share code, notes, and snippets.

# data[].attributes.headline
Medium spicy: Creating an advanced responsive website logo.

# data[].attributes.subject
Medium spicy: Creating an advanced responsive website logo.

# data[].attributes.body
Once you're comfortable with standard inline SVGs, you can use the `symbol` and `use` elements to create more advanced responsive SVG effects.

The below article includes a video tutorial and sample code:

Article
Video
Codepen

# data[].attributes.attachment_link.readable_text
In this tutorial I'll explain how to create responsive SVG images; more specifically, I'll explain how to create SVG logos, icons, and images, which change depending on the screen they're displayed with.

Responsive SVG Images

Let's begin with a demo. Here's what we're working towards (check out the full screen version for maximum effect):

If you resize the container (hat tip to Rick Strahl for his jQuery Resizable plugin) or the browser window, you'll see the SVG respond.

What We're Doing

Follow the video to learn how to:

Create this logo in Adobe XD

Export the SVG assets

Clean up and optimize the SVG using SVGOMG.

Once you have your SVG (download the optimized assets here if you like) the following steps describe how you make a responsive logo.

1. Hand Code the SVG Element

We're going to hand code the beginnings of this SVG, pasting in pieces of our logo assets wherever needed. Begin by opening an SVG element.

Note: we need to include these peculiar namespace strings so that we can use href attributes etc. further down the line.

<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
</svg>

2. Define Some Symbols

Nested inside our svg we need to define some symbols; each of our components will have its own symbol. Here's what a symbol looks like, including, in this case, a viewBox of 60x60 (matching the dimensions of our icon).

<symbol id="icon" viewBox="0 0 60 60">
</symbol>

Now we paste the contents of our SVG icon within the symbol element, but only the path elements for the flag and the castle. We end up with:

<symbol id="icon" viewBox="0 0 60 60">

    <path id="flag" d="M37.4 21.2c0 .5-.3 1-.8 1.3l-5 2.2v4.8c0 .8-.6 1.4-1.4 1.4-.8 0-1.4-.6-1.4-1.4V18.6c0-.5.2-.9.6-1.2.4-.3.9-.3 1.3-.1l5.8 2.6c.5.3.8.7.9 1.3z" fill="#f26322"/>
    <path id="castle" d="M30.2 0c16.6.1 30 13.8 29.8 30.4.1 14-9.5 26.3-23.2 29.6h-.2c-1.2.1-2.1-.8-2.2-2v-7.3c0-2.5-1.9-4.5-4.4-4.5-2.5 0-4.5 2.1-4.5 4.6v7.3c-.1 1.2-1.2 2-2.4 1.9C9.7 56.6.2 44.7 0 30.8-.2 14 13.2.2 30 0h.2zm24.2 30.4v-.6C54.3 16.2 43.2 5.4 29.6 5.6S5.3 16.9 5.5 30.4c0 6.1 2.3 12 6.4 16.6.3.2.6.2.9.2.9 0 1.6-.8 1.5-1.6v.4l2.5-16.4c0-.6.5-1 1.1-1h4.4c.6 0 1.1.5 1.1 1.2v3.4h3.4v-3.4c0-.6.5-1.1 1.1-1.2h4.4c.6 0 1.1.5 1.1 1.2v3.4h3.4v-3.4c0-.6.5-1.1 1.1-1.2h4.4c.6 0 1 .4 1.1 1l2.5 16.5.3.6c.6.6 1.5.7 2.1.1 4-4.5 6.2-10.4 6.1-16.4z" fill="#334047"/>

</symbol>

Repeat this process of creating a symbol for the "type" SVG too.

3. Define Symbols For the Logo Versions

We now need to define more symbols; one for each version of the logo we designed previously (the landscape, and the full version).

These symbols are created just like before, making sure that the viewBox is the correct size in each case. For example:

<symbol id="landscape" viewBox="0 0 274 75">

</symbol>

The main difference comes now: instead of pasting in the svg path contents directly, we're going to place use elements referencing our previous symbol parts by their id, like so:

<symbol id="landscape" viewBox="0 0 274 75">
    <use xlink:href="#icon" x="" y="" width="" height="" />
</symbol>

We can get the x, y, width, and height values from Adobe XD (or wherever you designed the icons). Here you can see the position and dimension values for the text icon:

You should end up with something like this-the two versions as symbols:

<symbol id="landscape" viewBox="0 0 274 75">
    <use xlink:href="#icon" x="0" y="0" width="75" height="75" />
    <use xlink:href="#type" x="94" y="12" width="180" height="50" />
</symbol>

<symbol id="full" viewBox="0 0 180 150">
    <use xlink:href="#icon" x="42" y="0" width="92" height="92" />
    <use xlink:href="#type" x="0" y="100" width="180" height="50" />
</symbol>

4. Reveal the Symbols in Your Browser

We have a whole bunch of code now, but if you open the SVG in your browser you won't see anything. We've defined our symbols, but we still need to actually use them. Let's directly place three use elements on our canvas; one for each version:

<use class="square" xlink:href="#icon" x="0" y="0" width="60" height="60" />
<use class="landscape" xlink:href="#landscape" x="0" y="0" width="274" height="75" />
<use class="full" xlink:href="#full" x="0" y="0" width="180" height="150" />

If you now open your SVG in a browser you'll see all three logos positioned in the same place, stacked on top of one another.

5. Display Icons Selectively Using Media Queries

We'll use media queries to display each of our icons individually, depending on the screen size, and we can do that directly within our SVG file.

After the opening svg tag add some style tags:

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<style>

</style>

Within them, add some media queries targeting the icons via the class names we just assigned them.

.landscape,
.full {
    visibility: hidden;
}

@media screen and (min-width: 500px) {
    .square {
        visibility: hidden;
    }
    .landscape {
        visibility: visible;
    }
}

@media screen and (min-width: 1200px) {
    .landscape{
        visibility: hidden;
    }
    .full {
        visibility: visible;
    }
}

Here we begin by hiding the landscape and full versions by default.

Then at screens of at least 500px we hide the square and reveal the landscape.

Then at screens of at least 1200px we keep the square hidden, hide the landscape, and reveal the full version.

Conclusion

And we're done! Save the SVG file and you'll be able to use it just like a normal image (with an img element). Don't forget you can check out the full screen version to get a full impression of the responsive effect we've created.

Learn More

Related Links

# data[].attributes.attachment_link.description
In this tutorial I'll explain how to create responsive SVG images; more specifically, I'll explain how to create SVG logos, icons, and images, which change depending on the screen they're displayed with. Let's begin with a demo.

# data[].attributes.body
A fun lecture by Sarah Drasner summarizing more advanced SVG concepts such as:
- Animation
- Accessibility
- Javascript control
- Visualization tools

# data[].attributes.body
You can extend CSS with Photoshop/Illustrator-level effects using SVG filters!

A very fast paced lecture by Sara Soueidan:

# data[].attributes.attachment_link.title
“SVG Filters: The Crash Course” by Sara Soueidan—An Event Apart video

# data[].attributes.headline
Extra Spicy: Advanced SVG animations using VueJS

# data[].attributes.subject
Extra Spicy: Advanced SVG animations using VueJS

# data[].attributes.body
Sarah Drasner's latest lecture on advanced web animations:
- Page transitions in single-page applications
- Handling animation state
- Animation components
- Augmented reality scenes with 3D animations

# data[].attributes.attachment_link.title
The Future of Web Animation by Sarah Drasner