{"id":15261,"date":"2018-06-12T11:48:33","date_gmt":"2018-06-12T10:48:33","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15261"},"modified":"2024-02-09T12:44:36","modified_gmt":"2024-02-09T12:44:36","slug":"building-responsive-image","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/","title":{"rendered":"Building a Responsive Image"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are quite a few articles on the web that deal with responsive logos. The most popular example might be the <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/responsivelogos.co.uk\/\">Responsive Logos website<\/a> that shows some very well known logos in different variations for different screen sizes. When I first saw this example, I thought it wasn\u2019t much more than a little gimmick. In the end, it is just <code class=\"fontSize-s language-js centered\">&lt;div&gt;<\/code> with a big image sprite as background. It wasn\u2019t until I heard a talk at Smashing Conference by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/MikeRiethmuller\">@MikeRiethmuller<\/a> titled: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/vimeo.com\/235428198\">Beyond Media Queries<\/a>, that I got more interested in this topic. In addition to the talk, I highly recommend reading his article \u201c<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.madebymike.com.au\/writing\/svg-has-more-potential\/\">SVG has more potential<\/a>\u201d.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">There are two things I learned that really got me excited.<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>When using SVG, you can drop the <code class=\"fontSize-s language-js centered\">viewBox<\/code> attribute and establish a new coordinate system on nested SVG-symbol elements by applying a new <code class=\"fontSize-s language-js centered\">viewBox<\/code>. (Yeah I know. Sounds confusing. Below, I\u2019ll explain in more detail.)<\/li>\n<li>When you use media queries inside SVG files and then insert the image via img-tag or as a CSS background-image, the media queries are bound to the width of the image. Pretty much the same behavior as if you used <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/alistapart.com\/article\/container-queries-once-more-unto-the-breach\">Container Queries<\/a>.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The idea was born<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After I read about all this, I got the idea to build a logo file for our company, that not only reacts to the browser width but instead adapts while respecting its aspect ratio. So you can use it anywhere, and the file itself chooses which version to show depending on the size it\u2019s given.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">The final result<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you\u2019re already excited, download the final <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.ichimnetz.com\/responsive-logo\/9e-anywhere.svg\">DEMO FILE<\/a> or see it in action in this <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/codepen.io\/enbee81\/full\/QrNRdm\/\">CodePen<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/resp1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15269\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/resp1.gif\" alt=\"\" width=\"1112\" height=\"424\" \/><\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Step by step (\u2026uuh Baby????)<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the following, I\u2019m going to walk you through every step you have to perform to build your own responsive Logo. You should at least have some basic knowledge about SVG and also CSS. But the good news is: there will be no JavaScript at all. For the most part, we just have to copy code from one file to another.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">1.Designing the\u00a0logo<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Let\u2019s start by designing four versions of our logo. My tool of choice for that is <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.sketchapp.com\/\">Sketch<\/a>.<\/p>\n<div id=\"attachment_6580\" style=\"width: 1115px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1bVWMOi6RPVVp6-8YRTIEtA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1bVWMOi6RPVVp6-8YRTIEtA.png\" alt=\"\" width=\"1105\" height=\"476\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Logo Variations: 1. Skyscraper - 2. Portrait \u2014 3. Square \u2014 4. Landscape<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whenever there are elements, that can be found on multiple versions, I recommend to use symbols in Sketch. This is going to make it easier for you in the future, and the SVG that we\u2019re going to build is going to use the same symbols. (If you\u2019re not familiar with symbols in Sketch I highly recommend this <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/ux-power-tools\/this-is-without-a-doubt-the-coolest-sketch-technique-youll-see-all-day-ddefa65ea959\">Medium Story<\/a> by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@jon.moore\">Jon Moore<\/a>.)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As you can see, the logo consists of a visual element and the company name. Only in the square version, I chose not to display the name. The reason for this is, that I wanted it to be recognizable, even when used as a tiny thumbnail by maybe only about 32px x 32px. To make your brand more dynamic and engaging across digital platforms, consider using an <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.renderforest.com\/logo-animation\">animated logo<\/a> variant as part of your visual identity.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">2.Setting up the SVG\u00a0file<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Before we export any images, we have to create a new SVG file. Maybe it\u2019s a little frightening to start your SVG with writing code, but in the end, it is not too complicated. Pinky promise. All we need is an opening and a closing tag like this:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;svg width=\u201d100%\u201d height=\u201d100%\u201d xmlns=\u201dhttp:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\u201dhttp:\/\/www.w3.org\/1999\/xlink\"&gt;\r\n&lt;\/svg&gt;<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you look at the attributes, you\u2019ll notice, that there is no viewBox attribute. We only set width and height to 100%.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>(Note: There are also two xmlns attributes present. To be honest, I don\u2019t exactly know why they have to be there, I should probably google it\u2026 anyway if you delete them, you will not be able to use any symbols within the SVG and get some ugly error messages instead.)<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">3. Exporting SVG-symbols<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Because we will be using both elements as symbols in the final SVG, we have to put each of them on a single artboard and export them as SVG.<\/p>\n<div id=\"attachment_6580\" style=\"width: 703px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1gSdjNhOjAFtS2rB12HRAUw.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1gSdjNhOjAFtS2rB12HRAUw.gif\" alt=\"\" width=\"693\" height=\"559\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Place all symbols on seperate artboards before you export them as\u00a0SVG<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It is crucial that you do not export the objects but always create a new artboard. If you export elements from a bigger artboard, you will end up with strange looking transform attributes attached to your groups. It also helps to detach all symbols and delete all unused groups. Finally, do some proper naming and see if there is any mask applied, that is not used.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now let\u2019s see, what the exported code looks like:<\/p>\n<style type=\"text\/css\">.gist { max-width: 720px; margin: 0 auto; }<\/style>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script src=\"https:\/\/gist.github.com\/enbee81\/c283c4f82ac1701493b44568423401c7.js\"><\/script><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All gists are saved as HTML-files and not as SVG If it was saved as SVG, you\u2019d sadly only see the rendered image.????<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019d recommend to use something like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/jakearchibald.github.io\/svgomg\">SVGOMG<\/a> to reduce file size and delete all the unnecessary stuff. But do <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">not<\/strong> clean IDs. If you named your layers in Sketch you can identify them easier by ID in the final file. This is how your optimized file is going to look like:<\/p>\n<style type=\"text\/css\">.gist { max-width: 720px; margin: 0 auto; }<\/style>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script src=\"https:\/\/gist.github.com\/enbee81\/483474f96cbc2a5d8a2bdf7b8f478268.js\"><\/script><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If everything is correct, you will see a group that has the name of your artboard as ID. Inside of this group is the content, that is of interest. In this case it\u2019s a rectangle serving as background and a complex path that builds the IX (roman 9 rotated counter-clockwise by 90 degrees\u00a0\u2026 just in case you were asking).<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">4. Building the\u00a0symbols<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All our files are ready and can be put together. Start by writing some symbol tags in your final file and give each a unique ID as well as a viewBox attribute that matches the viewBox of the exported files.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;svg width=\u201d100%\u201d height=\u201d100%\u201d xmlns=\u201dhttp:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\u201dhttp:\/\/www.w3.org\/1999\/xlink\"&gt;\r\n  &lt;symbol id=\u201dix\u201d viewBox=\u201d0 0 160 160\"&gt;\r\n    &lt;!-- Insert Symbol Content here --&gt;\r\n  &lt;\/symbol&gt;\r\n  &lt;symbol id=\u201dtypography\u201d viewBox=\u201d0 0 144 16\"&gt;\r\n    &lt;!-- Insert Symbol Content here --&gt;\r\n  &lt;\/symbol&gt;\r\n&lt;\/svg&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Finally, paste the content of your exported files (everything inside the group that is named like your artboard) inside the symbol tags. Once you\u2019re done with that your file should look like this:<\/p>\n<style type=\"text\/css\">.gist { max-width: 720px; margin: 0 auto; }<\/style>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script src=\"https:\/\/gist.github.com\/enbee81\/ebe46dfa178342c7a68b381fdd536a35.js\"><\/script><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">5. Using our\u00a0symbols<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So far so good. Sadly, if you open the file in a browser, you won\u2019t see anything. For now, we defined our symbols, but never placed them anywhere. To insert a symbol you need a <code class=\"fontSize-s language-js centered\">use-tag<\/code> in your file:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;use xlink:href=\u201d#ix\u201d x=\u201d0\" y=\u201d0\" width=\u201d100\" height=\u201d100\u201d\/&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now let\u2019s see what exactly is happening here.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">First the <code class=\"fontSize-s language-js centered\">xlink:href<\/code> points to a symbol with a unique ID and will render its contents\u2026 well, it\u2019s not really rendered, but cloned and suddenly there is a weird thing coming up called the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Shadow DOM<\/strong>. It may sound like something from <em>Stranger Things<\/em>, but you don\u2019t need to be afraid. As long as you don\u2019t want to change anything inside the symbol instance via CSS, there is nothing to worry about.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Next we have the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">x<\/strong>, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">y<\/strong>, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">width<\/strong> and <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">height<\/strong> attributes. You may already have guessed, that these attributes define the position and dimensions of the rendered symbol. But there is no unit given, so how big will our symbol be? Inside an SVG the units are defined by the <code class=\"fontSize-s language-js centered\">viewBox<\/code> attribute set in the SVG tag. Since we did not set a <code class=\"fontSize-s language-js centered\">viewBox<\/code> and only defined width and height (100%), one unit matches one pixel and our symbol will have a width of 100px. And it doesn\u2019t matter if you change the width of the SVG. It will always stay at at 100px width.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Try changing the width and height attributes inside this <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/codepen.io\/enbee81\/pen\/BxKrdb\">CodePen<\/a>. You will notice that the symbol will always keep its aspect ratio. Luckily this is exactly what we need for our logo. If you wanted to change the resizing behavior, you needed an attribute called <code class=\"fontSize-s language-js centered\">preserveAspectRatio<\/code>. Check out <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/SaraSoueidan\">@SaraSoueidan<\/a>\u2019s Article on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.sarasoueidan.com\/blog\/svg-coordinate-systems\/\">Understanding SVG Coordinate Systems and Transformation<\/a> if you want to learn more about it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Apart from the unitless values, you can also use percentages to define position and dimensions through the attributes. So to make this symbol look like the square version, simply use a width of 90% and position its upper left corner 5% from the bounding box of the image:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;use xlink:href=\u201d#ix\u201d x=\u201d5%\" y=\u201d5%\" width=\u201d90%\" height=\u201d90%\u201d\/&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>(Maybe you think that setting width or height to \u2018auto\u2019 is a good idea\u2026 well, it\u2019s not. Safari and Firefox simply ignore it while Chrome won\u2019t render anything.)<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">6. Combining symbols inside a new\u00a0symbol<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For the portrait version, we\u2019ll need both symbols. In order to make sure they scale proportional and always have the same distance to the border and to each other, we simply create yet another symbol. This symbol again has its own <code class=\"fontSize-s language-js centered\">viewBox<\/code> attribute which allows us to place our symbols within the new coordinate system. To see where exactly everything has to be placed, you can simply go back to your sketch file and inspect the sizes and distances.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1SLzMg-dfUGLtmuP_NOX8cw.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1SLzMg-dfUGLtmuP_NOX8cw.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<div id=\"attachment_6580\" style=\"width: 1618px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1i7-rfeRLI8yOtQSlBteBAw.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1i7-rfeRLI8yOtQSlBteBAw.png\" alt=\"\" width=\"1608\" height=\"836\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Portrait-Version: Purple: viewBox \u2014 Red: Position \u2014 Turquoise: Width and\u00a0Height<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now, we only have to translate all the numbers to our new SVG symbol, which will then look like this:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;symbol id=\u201dportrait\u201d viewBox=\u201d0 0 <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">160 180<\/strong>\"&gt;\r\n  &lt;use xlink:href=\u201d#ix\u201d x=\u201d<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">40<\/strong>\" y=\u201d<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">32<\/strong>\" width=\u201d<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">80<\/strong>\" height=\u201d<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">80<\/strong>\"\/&gt;\r\n  &lt;use xlink:href=\u201d#typo\u201d x=\u201d<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">3<\/strong>\" y=\u201d<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">130<\/strong>\" width=\u201d<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">154<\/strong>\" height=\u201d<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">16<\/strong>\"\/&gt;\r\n&lt;\/symbol&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When we use this symbol, we wouldn\u2019t want it at 100% width, so let\u2019s just scale it down like our square symbol.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;use xlink:href=\u201d#portrait\u201d x=\u201d5%\" y=\u201d5%\" width=\u201d90%\" height=\u201d90%\u201d\/&lt;\r\n<\/code><\/pre>\n<\/aside>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">7. Hide and\u00a0show<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Up to this point we created three symbols and have two <code class=\"fontSize-s language-js centered\">use<\/code> tags in our SVG.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script src=\"https:\/\/gist.github.com\/enbee81\/7eb1229faccb75d99981bbc02b7685ce.js\"><\/script><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Finally, the fun part begins, and we can make it responsive. Right now both symbols are rendered on top of each other. To hide the parts we don\u2019t want to display, we need to add some classes to the <code class=\"fontSize-s language-js centered\">use<\/code> tags.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;use class=\"square\" xlink:href=\u201d#ix\u201d x=\u201d5%\u201d y=\u201d5%\u201d width=\u201d90%\u201d height=\u201d90%\u201d\/&gt;\r\n&lt;use class=\"portrait\" xlink:href=\u201d#portrait\u201d x=\u201d5%\u201d y=\u201d5%\u201d width=\u201d90%\u201d height=\u201d90%\u201d\/&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now, the only thing missing is some CSS to show only one logo version at a time. You can add a <code class=\"fontSize-s language-js centered\">&lt;style&gt;<\/code> tag to your SVG and use some media queries just like you would in a regular CSS file.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In CSS you most likely use something like <code class=\"fontSize-s language-js centered\">@media (min-width: 768px) {\u00a0... }<\/code>, but then you are only looking at the width of the image. We are interested in aspect ratio and not width, so our media queries will have to look like this: <code class=\"fontSize-s language-js centered\">@media (<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">min-aspect-ratio: 1\/2<\/strong>) {\u00a0... }<\/code>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For our first two versions, let\u2019s make the portrait-version the default and show the single-IX-version only when the image width is at least the same as the image height. In other words: at the point where the image changes from portrait mode to landscape, we will not show the typography anyomore, only the graphical logo.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;style&gt;\r\n  .square { visibility: hidden; }\r\n  .portrait { visibility: visible; }\r\n  @media (min-aspect-ratio: 1\/1) {\r\n    .square { visibility: visible; }\r\n    .portrait { visibility: hidden; }\r\n  }\r\n&lt;\/style&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you create another symbol for the landscape version, you would probably want to show it when the width of the image is at least two times it\u2019s height. Let\u2019s see how the style changes:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;style&gt;\r\n  .square,\r\n  .landscape { visibility: hidden; }\r\n  .portrait { visibility: visible; }\r\n  @media (min-aspect-ratio: 1\/1) {\r\n    .portrait,\r\n    .landscape { visibility: hidden; }\r\n    .square { visibility: visible; }\r\n  }\r\n  @media (min-aspect-ratio: 2\/1) {\r\n    .portrait,\r\n    .square { visibility: hidden; }\r\n    .landscape { visibility: visible; }\r\n  }\r\n&lt;\/style&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And that\u2019s it. We\u2019re done building our own responsive svg logo. Here, you can see the full code with three versions going from portrait mode to landscape:<\/p>\n<style type=\"text\/css\">.gist { max-width: 720px; margin: 0 auto; }<\/style>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script src=\"https:\/\/gist.github.com\/enbee81\/c808d7d93ac324359e2aa80544623875.js\"><\/script><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">8. A little bit of transformation<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">OK, OK\u2026 I know the skyscraper-version is missing in the example above. The reason here is, that you need to perform some transformation to create the needed symbol. I will not explain it in detail, but you can find the code you\u2019ll need below:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">\r\n&lt;symbol id=\u201dskyscraper\u201d viewBox=\u201d0 0 64 328\"&gt;\r\n  &lt;use xlink:href=\u201d#ix\u201d x=\u201d0\" y=\u201d264\" width=\u201d64\" height=\u201d64\"\/&gt;\r\n  &lt;use xlink:href=\u201d#typography\u201d x=\u201d-90\" y=\u201d109\" width=\u201d246\" height=\u201d27\" transform=\u201drotate(-90 32 123)\u201d\/&gt;\r\n&lt;\/symbol&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Over to you: I hope this tutorial has been useful and I\u2019d certainly love to see some of your results.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/9elements\/building-a-responsive-image-e4c6229fa1f6\">Nils' Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are quite a few articles on the web that deal with responsive logos. The most popular example might be the Responsive Logos website that shows some very well known logos in different variations for different screen sizes. When I first saw this example, I thought it wasn\u2019t much more than a little gimmick. In the end, it is just&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":234,"featured_media":15285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-15261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"The most popular example might be the Responsive Logos website that shows some very well known logos in different variations for different screen sizes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Responsive Image | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"The most popular example might be the Responsive Logos website that shows some very well known logos in different variations for different screen sizes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-12T10:48:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-09T12:44:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Nils1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"694\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"8 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Nils1.png\",\"width\":2000,\"height\":694},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/\",\"name\":\"Building a Responsive Image | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/#primaryimage\"},\"datePublished\":\"2018-06-12T10:48:33+00:00\",\"dateModified\":\"2024-02-09T12:44:36+00:00\",\"description\":\"The most popular example might be the Responsive Logos website that shows some very well known logos in different variations for different screen sizes.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/e4117474e378b69f8688f8ce0d6a0f2d\"},\"headline\":\"Building a Responsive Image\",\"datePublished\":\"2018-06-12T10:48:33+00:00\",\"dateModified\":\"2024-02-09T12:44:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/building-responsive-image\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/e4117474e378b69f8688f8ce0d6a0f2d\",\"name\":\"Nils Binder\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/10487c972189ae5aa3d30c9ea80a2646a912439e9ab13d0d850568ba109f42e6?s=96&d=mm&r=g\",\"caption\":\"Nils Binder\"},\"description\":\"Hey, I'm a UI\/UX designer and part time coder @9elements. Also I'm an origami enthusiast spending hours folding paper.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/234"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=15261"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15261\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/15285"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=15261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=15261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=15261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}