Building a responsive image
How to create a logo that responds to its own aspect ratio
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’t much more than a little gimmick. In the end, it is just <div> with a big image sprite as background. It wasn’t until I heard a talk at Smashing Conference by @MikeRiethmuller titled: Beyond Media Queries, that I got more interested in this topic. In addition to the talk, I highly recommend reading his article “SVG has more potential”.
There are two things I learned that really got me excited.
- When using SVG, you can drop the
viewBoxattribute and establish a new coordinate system on nested SVG-symbol elements by applying a newviewBox. (Yeah I know. Sounds confusing. Below, I’ll explain in more detail.) - 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 Container Queries.
The idea was born
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’s given.
The final result
If you’re already excited, download the final DEMO FILE or see it in action in this CodePen.
Step by step (…uuh Baby ♬ )
In the following, I’m 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.
1. Designing the logo
Let’s start by designing four versions of our logo. My tool of choice for that is Sketch.
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’re going to build is going to use the same symbols. (If you’re not familiar with symbols in Sketch I highly recommend this Medium Story by Jon Moore.)
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.
2. Setting up the SVG file
Before we export any images, we have to create a new SVG file. Maybe it’s 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:
html<svg width=”100%” height=”100%” xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">
</svg>If you look at the attributes, you’ll notice, that there is no viewBox attribute. We only set width and height to 100%.
(Note: There are also two xmlns attributes present. To be honest, I don’t exactly know why they have to be there, I should probably google it… anyway if you delete them, you will not be able to use any symbols within the SVG and get some ugly error messages instead.)
3. Exporting SVG-symbols
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.
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.
Now let’s see, what the exported code looks like:
html<?xml version="1.0" encoding="UTF-8"?>
<svg width="160px" height="160px" viewBox="0 0 160 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
<title>ix</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="ix" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="160" height="160"></rect>
<path d="M121.660503,96.7351709 C121.734151,96.9832696 121.863036,97.1972433 122.05176,97.3853926 C120.099155,96.2334395 118.385907,94.7725157 116.523521,93.5034304 C116.668056,94.1610306 120.641392,96.3275141 120.399273,96.7729852 C120.343116,96.8910396 115.252164,93.1160643 115.178516,93.1787807 C114.862748,93.4065889 116.0356,94.6157247 115.787036,94.5594643 C115.833067,94.598201 116.741705,95.2687133 116.637676,95.378467 C116.428699,95.4559403 122.086744,99.7022111 121.589616,100.302629 C121.388004,100.53966 119.845988,99.127618 119.637011,99.0270872 C119.785228,99.2678076 119.957382,99.4863928 120.159915,99.6856097 C118.955762,98.9699046 117.983602,97.9802763 116.843892,97.1852534 C116.994871,97.4674773 117.20569,97.7063531 117.472666,97.9009585 C116.522601,97.9074146 114.507394,95.5075891 113.687134,95.0233814 C113.42292,94.8795026 112.16261,93.6519208 111.973886,93.7284717 C111.955474,93.8031781 111.975727,93.870506 112.033725,93.9267663 C111.556852,93.7026473 111.143499,93.4065889 110.793669,93.032135 C110.815764,93.2341187 109.474441,91.3148117 108.938648,91.5527652 C109.267304,91.8718811 109.593199,92.1919193 109.916332,92.5128799 C108.83554,92.7480665 107.967409,90.0374257 106.509169,90.6479886 C106.627006,90.5991066 112.52717,96.2020813 112.684594,96.5885251 C112.666182,96.5424101 112.335684,96.4732376 112.321875,96.4308117 C112.682753,97.6288799 114.346288,98.7485525 115.166548,99.6219709 C113.25537,98.3003145 111.408634,96.4962951 109.514947,95.4651633 C108.772018,95.0611957 108.536343,94.2855411 107.823794,94.6876641 C107.670053,94.7715934 106.069119,93.6657553 105.881315,93.4785283 C105.847253,93.7736644 105.896966,94.0531214 106.026771,94.3196662 C104.529866,93.1354326 103.110291,91.3913626 101.357457,90.5474578 C101.759762,91.1229732 102.143655,91.5988802 102.253207,91.8488236 C102.378409,92.1292029 102.573578,92.3191968 102.635258,92.6364681 C100.112798,90.6138635 97.6105905,88.5257755 95.2087294,86.3574474 C94.6876663,85.8898411 92.0252737,83.4346776 91.6054773,84.1863523 C90.7511549,83.4106977 85.0369532,78.510516 83.8604186,78.2753294 C84.8086429,79.0583624 85.6399501,79.953916 86.5642386,80.7544727 C86.3423725,80.9269429 83.9165756,78.8139528 83.5731895,78.5243505 C82.9766368,78.0272306 81.0737441,76.3541778 80.225866,75.5785232 C79.5400145,74.9532036 78.8817811,74.33434 78.2171036,73.7210103 C76.9816502,74.6949595 74.8927951,76.4565531 74.5972806,76.692662 C74.2428473,76.9831866 73.8304158,77.159346 73.476903,77.5328776 C72.5286788,78.5391073 71.4267134,79.4116034 70.3137007,80.2481299 C68.906094,81.3060084 67.655911,82.554803 66.2289716,83.6385059 C66.2446219,83.4494344 66.4701704,83.4106977 66.3679831,83.1561429 C65.9978995,83.4494344 65.6314983,83.7159792 65.2899535,84.0175714 C63.3796959,85.6721782 61.470359,87.3258627 59.5729899,88.9924594 C58.149733,90.2430987 56.7725063,91.5481537 55.3188694,92.7665125 C53.7206973,94.0983142 52.1943324,95.5131229 50.6090488,96.8550699 C49.0007501,98.2209967 52.8470421,95.7206405 51.3630252,97.2267569 C51.1135409,97.4748557 50.8180264,97.6879071 50.5114646,97.8576104 C50.1266513,98.0771179 49.8559931,98.4082237 49.5162895,98.6710793 C49.1268731,98.9671377 48.6601258,99.1792668 48.1998228,99.4448893 C48.2458531,98.9265565 48.2421707,98.9431579 47.7303137,98.7919006 C47.3326119,98.6738462 47.0269707,98.3473519 46.8014222,98.0568273 C46.4736865,97.6288799 45.5512392,95.8377726 45.2474392,94.5281061 C45.2244241,94.4423322 45.2179798,94.33719 45.2391538,94.2578721 C45.4904792,93.2682439 45.2216622,92.3256529 44.8930059,91.3913626 C44.4953041,90.2680008 44.537652,89.0957571 44.4437501,87.9419593 C44.3885138,87.2244097 44.9629719,86.7752494 45.3965774,86.3168661 C46.2978507,85.35214 47.1889974,84.3468326 48.2191555,83.5213738 C48.8911979,82.9799835 49.5356222,82.3648092 50.3577234,81.9903552 C50.97545,81.7053644 51.3455337,81.0865009 51.8251694,80.61705 C52.3867391,80.0645921 53.0265603,79.582229 53.5540676,79.0177812 C54.326456,78.1987785 55.4790548,77.7809764 56.2477609,76.9518284 C56.9170415,76.2287449 63.6807341,70.6017905 64.6050226,69.8187575 C66.1396728,68.5256925 67.5795007,67.2363166 69.1067861,65.9727651 C68.8904437,65.7864604 68.6759425,65.6020004 68.454997,65.4092396 C66.6634977,63.859775 64.6630207,62.0529886 62.7997141,60.5072132 C60.9529784,58.977117 59.1403051,57.3215878 57.2981724,55.7177075 C54.3945809,53.1915269 51.6290803,51.5184741 48.6490786,49.0503983 C47.1089046,47.7785462 43.7551368,45.4857075 43.4145126,43.4446568 C43.1788374,42.0270812 45.1461725,40.5735358 45.8007234,39.6014313 C45.7731053,39.6401679 48.7503452,34.9816288 49.6866016,35.3662281 C49.9646246,35.4833602 50.3319464,35.080315 50.9938622,35.3284138 C52.0829391,35.7360705 52.824027,36.6980298 53.6369221,37.4644614 C56.2560463,39.9399155 58.9920875,42.2890145 61.7051135,44.6473365 C67.3373813,49.543829 72.7100382,53.8445155 78.2051357,58.6192644 C78.5255066,58.3794663 78.8486393,58.135979 79.1680896,57.8906472 C80.295832,57.0310632 81.4815726,56.2378849 82.6212829,55.387524 C84.072158,54.3213448 85.5460483,53.2939022 87.0199386,52.2535474 C87.7186786,51.7545829 88.451481,51.2980443 89.1318089,50.7787892 C90.4363076,49.7744041 91.8172167,48.8770059 93.1769518,47.9574724 C95.006196,46.7225123 96.8492493,45.5096873 98.6959851,44.2876393 C99.7703323,43.5719343 100.871377,42.8774421 102.010167,42.238288 C102.50177,41.9625202 102.904996,41.5152045 103.474851,41.3372005 C103.703161,41.2615719 103.901092,41.117693 104.177273,40.9406114 C105.741383,39.944527 107.342317,39.0083922 108.967187,38.1091493 C110.938204,37.0125342 112.892651,35.8753379 114.92719,34.8866319 C115.466665,34.6246986 116.031918,34.2225757 116.782211,34.2068966 C116.375304,34.7178509 115.886462,35.0139094 115.433524,35.4169546 C115.873573,35.6447628 116.678183,34.9530375 116.767482,35.1218185 C116.891764,35.3523936 116.559425,35.7526719 116.661612,35.7028677 C116.954365,35.556222 117.215817,35.3145793 117.613519,35.2869103 C117.351146,35.7250029 116.955285,35.9334428 116.609138,36.2267343 C117.14493,36.1289705 117.549076,35.6641311 118.223881,35.61156 C117.553679,36.1879977 116.816274,36.4111944 116.185659,36.8160842 C115.71615,37.1296664 115.188642,37.3703867 114.685991,37.6387761 C114.667579,37.6443099 114.636279,37.6489214 114.636279,37.6609114 C114.541456,38.2041463 113.990934,38.3166669 113.677928,38.6782086 C114.19715,38.6551511 114.624311,38.4273429 115.039504,38.1607981 C115.205213,38.2871533 114.95757,38.3738495 115.023854,38.5297183 C116.726054,37.8960979 118.153914,36.6611378 119.935287,36.161251 C119.285339,36.5781307 118.637233,37.0125342 117.981761,37.4100457 C117.464381,37.7254724 116.994871,38.1100716 116.451714,38.3996739 C116.001538,38.6385497 115.502569,38.7934962 115.083693,39.1015445 C114.94192,39.2094536 114.632596,39.3155182 114.769767,39.5433264 C114.917064,39.8034151 115.188642,39.7360871 115.447333,39.5848299 C116.225245,39.1393588 117.012363,38.7215567 117.799481,38.2972986 C117.855638,38.2687073 117.938493,38.2926871 118.009379,38.2926871 C117.795799,38.9770339 117.116391,39.2223658 116.707642,39.8024928 C117.186358,39.7314756 117.461619,39.3920691 117.860241,39.2694032 C118.551616,39.0674194 119.204326,38.7722833 119.968429,38.7575265 C120.464636,38.7464589 120.955319,38.3987516 121.500317,38.2806972 C121.082362,38.5712218 120.647836,38.8516011 120.241849,39.1679501 C120.110202,39.2703255 119.785228,39.2629471 119.918716,39.6060428 C120.072457,40.0007873 120.320101,39.7748237 120.526316,39.6945836 C120.764753,39.6032759 120.998587,39.4750761 121.23058,39.3607109 C121.30699,39.321052 121.370512,39.3155182 121.406416,39.4086705 C121.435875,39.4861437 121.434034,39.5608501 121.332767,39.5829853 C120.842084,39.6761376 120.482127,40.018311 120.095473,40.2959234 C119.709739,40.5809142 119.346099,40.8981856 118.96681,41.2108454 C119.035855,41.4672449 119.325846,40.9941048 119.373717,41.3122984 C119.414224,41.5677756 119.158296,41.5779209 119.045982,41.6286474 C117.166104,42.4642516 115.639739,43.8624589 113.927412,44.9553848 C113.193689,45.4211465 111.183085,46.6431944 110.928078,46.7972186 C110.183307,47.243612 109.449584,47.7213635 108.723226,48.201882 C108.629324,48.2599869 108.398252,48.2719768 108.525296,48.5136195 C108.63853,48.7368162 108.756368,48.6611876 108.928521,48.5800252 C110.002869,48.0626147 111.060645,47.4870992 111.967442,46.7206677 C112.539138,46.2392269 113.227752,46.0695236 113.818781,45.6572554 C114.550662,45.1444564 117.213976,43.4898495 118.3141,42.8359386 C118.899605,42.4836199 118.874749,42.4421163 119.442763,42.6773029 C119.292704,42.9115672 118.995348,42.9420031 118.825957,43.1347639 C118.289244,43.7075124 117.694532,44.2000208 117.096138,44.6833062 C116.528124,45.1472233 115.92973,45.5696368 115.323051,45.9736044 C115.069884,46.141463 114.845256,46.310244 114.703483,46.6007686 C116.560345,45.714438 118.19258,44.4213729 120.023665,43.4769373 C119.437239,44.1354598 118.616979,44.4453527 117.917319,44.9397057 C116.828242,45.714438 115.561488,46.2134025 114.604058,47.1836624 C114.358256,47.4336058 113.979887,47.3570549 113.698181,47.5986976 C112.623834,48.5034742 111.283432,49.0042833 110.197116,49.8832355 C109.796653,50.2106522 109.346476,50.4698186 108.962584,50.8175258 C108.808842,50.9531039 108.665228,51.1015943 108.457171,51.1477093 C107.415045,51.3773621 106.828619,52.3254869 105.937472,52.7967823 C105.373141,53.0992969 104.889823,53.5659808 104.32457,53.8297587 C103.653449,54.1534861 103.056896,54.6008018 102.469549,55.006614 C101.507516,55.676204 100.592434,56.4195781 99.6294796,57.1030027 C99.1139402,57.4608552 98.469516,57.6324031 98.0727348,58.1747157 L98.0764172,58.1645704 C97.2699663,58.4938316 96.6623663,59.1200735 95.9507378,59.5922913 C94.7696003,60.3808581 93.62989,61.2210737 92.5288452,62.1175496 C92.3014555,62.3047766 92.0998427,62.517828 91.8669294,62.7013658 L91.8862621,62.6783083 C91.1009852,62.7244233 90.8671513,63.5166793 90.1739349,63.804437 C90.4804967,63.970451 89.3509131,64.4694155 89.271741,64.5256758 C88.7166155,64.9093528 88.0712707,64.8254235 87.631221,65.3225433 C87.4378937,65.5383616 87.0383507,65.7735482 86.6829968,65.9838327 C93.3205664,71.641223 100.033626,77.1667244 106.399616,82.9449361 C109.79297,86.0254192 113.40727,88.9103747 117.028013,91.7713504 C119.230103,93.5117311 125.102649,98.9883506 125.793103,99.4910043 C125.527969,99.7271132 122.106076,97.0967126 121.660503,96.7351709 Z M120.725167,110.589044 C120.084425,110.835299 115.648945,111.007769 118.786371,111.365621 C120.757388,111.586973 117.586821,111.744687 117.596948,112.45578 C118.245975,112.437334 119.226421,113.687974 119.482349,113.649237 C119.517332,113.836464 117.533426,114.365864 117.953222,114.425814 C119.638852,114.663767 116.527204,114.778133 116.732499,115.1821 C117.316163,116.334976 116.447111,115.942998 117.540791,116.471476 C118.127217,116.754622 117.954143,117.787599 117.56933,117.874295 C117.067599,117.986815 116.91662,118.256127 116.456317,118.298553 C116.392795,118.716355 116.013505,118.91096 115.510855,118.9829 C114.421778,119.389634 113.201054,119.851707 112.024519,119.971606 C111.264099,120.050924 111.298161,120.122863 110.542344,119.978984 C109.734052,120.084126 108.500439,120.151454 107.692147,120.073981 C107.024708,120.237228 97.037053,120.821967 96.2011427,120.709446 C95.5364651,120.852403 91.5382731,120.988903 90.7198543,120.871771 C89.8903882,121.029484 82.9582247,121.216711 82.2392314,121.133704 C81.3977975,121.28035 80.0997429,121.339377 79.2518648,121.226857 C78.412272,121.391026 77.1096145,121.421462 76.2589745,121.323698 C75.4341115,121.479567 57.1094481,121.040552 56.2164603,120.903129 C55.3520112,121.011038 51.0656694,120.867159 50.21595,120.720514 C49.503401,120.826578 48.4327361,120.753716 47.7174252,120.643963 C46.8879592,120.762939 45.5945077,120.696534 44.7871362,120.471493 C44.3222301,120.340526 44.0193507,120.410621 43.8195792,119.948548 C43.6557114,119.564871 43.6989798,119.331529 43.392418,119.169204 C43.0324611,118.977366 43.0112871,118.158363 43.2478829,117.850315 C42.8511017,117.007332 43.4025447,115.432043 43.0858562,114.266256 C42.8962114,113.571764 43.2681362,113.608656 43.6059986,112.977802 C43.2092174,113.002704 43.1236011,112.293455 43.1696314,112.162489 C43.4264805,111.427415 43.0499526,111.069563 43.5995544,110.446088 C43.9291314,110.072556 43.778152,109.76543 44.3682604,109.76543 C44.7954216,109.76543 45.310961,109.767275 45.7298368,109.835525 C46.6421574,109.763586 47.827898,109.808778 48.7328537,109.948968 C50.5869543,109.82169 58.9322481,110.127894 60.7338741,110.41473 C62.4572487,110.293908 64.517565,110.41473 66.2344953,110.621325 C68.0793898,110.52725 99.0181972,110.290219 100.697383,110.209979 C102.543198,110.121438 104.622847,109.841981 106.456694,110.022752 C107.775923,109.804167 109.467996,109.936056 110.767892,110.188766 C111.965601,110.147262 112.528091,109.711014 113.700022,109.772809 C113.774592,109.65291 115.569773,110.048576 115.761259,110.059644 C115.924207,109.778342 117.533426,110.022752 117.910874,110.044887 C118.325147,110.073478 121.106298,110.440554 120.725167,110.589044 Z" id="X" fill="#FFFFFF"></path>
</g>
</g>
</svg>I’d recommend to use something like SVGOMG to reduce file size and delete all the unnecessary stuff. But do not 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:
html<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="ix" fill="none" fill-rule="evenodd">
<rect id="Rectangle" width="160" height="160" fill="#000" fill-rule="nonzero"/>
<path id="X" fill="#FFF" fill-rule="nonzero" d="M121.660503,96.7351709 C121.734151,96.9832696 121.863036,97.1972433 122.05176,97.3853926 C120.099155,96.2334395 118.385907,94.7725157 116.523521,93.5034304 C116.668056,94.1610306 120.641392,96.3275141 120.399273,96.7729852 C120.343116,96.8910396 115.252164,93.1160643 115.178516,93.1787807 C114.862748,93.4065889 116.0356,94.6157247 115.787036,94.5594643 C115.833067,94.598201 116.741705,95.2687133 116.637676,95.378467 C116.428699,95.4559403 122.086744,99.7022111 121.589616,100.302629 C121.388004,100.53966 119.845988,99.127618 119.637011,99.0270872 C119.785228,99.2678076 119.957382,99.4863928 120.159915,99.6856097 C118.955762,98.9699046 117.983602,97.9802763 116.843892,97.1852534 C116.994871,97.4674773 117.20569,97.7063531 117.472666,97.9009585 C116.522601,97.9074146 114.507394,95.5075891 113.687134,95.0233814 C113.42292,94.8795026 112.16261,93.6519208 111.973886,93.7284717 C111.955474,93.8031781 111.975727,93.870506 112.033725,93.9267663 C111.556852,93.7026473 111.143499,93.4065889 110.793669,93.032135 C110.815764,93.2341187 109.474441,91.3148117 108.938648,91.5527652 C109.267304,91.8718811 109.593199,92.1919193 109.916332,92.5128799 C108.83554,92.7480665 107.967409,90.0374257 106.509169,90.6479886 C106.627006,90.5991066 112.52717,96.2020813 112.684594,96.5885251 C112.666182,96.5424101 112.335684,96.4732376 112.321875,96.4308117 C112.682753,97.6288799 114.346288,98.7485525 115.166548,99.6219709 C113.25537,98.3003145 111.408634,96.4962951 109.514947,95.4651633 C108.772018,95.0611957 108.536343,94.2855411 107.823794,94.6876641 C107.670053,94.7715934 106.069119,93.6657553 105.881315,93.4785283 C105.847253,93.7736644 105.896966,94.0531214 106.026771,94.3196662 C104.529866,93.1354326 103.110291,91.3913626 101.357457,90.5474578 C101.759762,91.1229732 102.143655,91.5988802 102.253207,91.8488236 C102.378409,92.1292029 102.573578,92.3191968 102.635258,92.6364681 C100.112798,90.6138635 97.6105905,88.5257755 95.2087294,86.3574474 C94.6876663,85.8898411 92.0252737,83.4346776 91.6054773,84.1863523 C90.7511549,83.4106977 85.0369532,78.510516 83.8604186,78.2753294 C84.8086429,79.0583624 85.6399501,79.953916 86.5642386,80.7544727 C86.3423725,80.9269429 83.9165756,78.8139528 83.5731895,78.5243505 C82.9766368,78.0272306 81.0737441,76.3541778 80.225866,75.5785232 C79.5400145,74.9532036 78.8817811,74.33434 78.2171036,73.7210103 C76.9816502,74.6949595 74.8927951,76.4565531 74.5972806,76.692662 C74.2428473,76.9831866 73.8304158,77.159346 73.476903,77.5328776 C72.5286788,78.5391073 71.4267134,79.4116034 70.3137007,80.2481299 C68.906094,81.3060084 67.655911,82.554803 66.2289716,83.6385059 C66.2446219,83.4494344 66.4701704,83.4106977 66.3679831,83.1561429 C65.9978995,83.4494344 65.6314983,83.7159792 65.2899535,84.0175714 C63.3796959,85.6721782 61.470359,87.3258627 59.5729899,88.9924594 C58.149733,90.2430987 56.7725063,91.5481537 55.3188694,92.7665125 C53.7206973,94.0983142 52.1943324,95.5131229 50.6090488,96.8550699 C49.0007501,98.2209967 52.8470421,95.7206405 51.3630252,97.2267569 C51.1135409,97.4748557 50.8180264,97.6879071 50.5114646,97.8576104 C50.1266513,98.0771179 49.8559931,98.4082237 49.5162895,98.6710793 C49.1268731,98.9671377 48.6601258,99.1792668 48.1998228,99.4448893 C48.2458531,98.9265565 48.2421707,98.9431579 47.7303137,98.7919006 C47.3326119,98.6738462 47.0269707,98.3473519 46.8014222,98.0568273 C46.4736865,97.6288799 45.5512392,95.8377726 45.2474392,94.5281061 C45.2244241,94.4423322 45.2179798,94.33719 45.2391538,94.2578721 C45.4904792,93.2682439 45.2216622,92.3256529 44.8930059,91.3913626 C44.4953041,90.2680008 44.537652,89.0957571 44.4437501,87.9419593 C44.3885138,87.2244097 44.9629719,86.7752494 45.3965774,86.3168661 C46.2978507,85.35214 47.1889974,84.3468326 48.2191555,83.5213738 C48.8911979,82.9799835 49.5356222,82.3648092 50.3577234,81.9903552 C50.97545,81.7053644 51.3455337,81.0865009 51.8251694,80.61705 C52.3867391,80.0645921 53.0265603,79.582229 53.5540676,79.0177812 C54.326456,78.1987785 55.4790548,77.7809764 56.2477609,76.9518284 C56.9170415,76.2287449 63.6807341,70.6017905 64.6050226,69.8187575 C66.1396728,68.5256925 67.5795007,67.2363166 69.1067861,65.9727651 C68.8904437,65.7864604 68.6759425,65.6020004 68.454997,65.4092396 C66.6634977,63.859775 64.6630207,62.0529886 62.7997141,60.5072132 C60.9529784,58.977117 59.1403051,57.3215878 57.2981724,55.7177075 C54.3945809,53.1915269 51.6290803,51.5184741 48.6490786,49.0503983 C47.1089046,47.7785462 43.7551368,45.4857075 43.4145126,43.4446568 C43.1788374,42.0270812 45.1461725,40.5735358 45.8007234,39.6014313 C45.7731053,39.6401679 48.7503452,34.9816288 49.6866016,35.3662281 C49.9646246,35.4833602 50.3319464,35.080315 50.9938622,35.3284138 C52.0829391,35.7360705 52.824027,36.6980298 53.6369221,37.4644614 C56.2560463,39.9399155 58.9920875,42.2890145 61.7051135,44.6473365 C67.3373813,49.543829 72.7100382,53.8445155 78.2051357,58.6192644 C78.5255066,58.3794663 78.8486393,58.135979 79.1680896,57.8906472 C80.295832,57.0310632 81.4815726,56.2378849 82.6212829,55.387524 C84.072158,54.3213448 85.5460483,53.2939022 87.0199386,52.2535474 C87.7186786,51.7545829 88.451481,51.2980443 89.1318089,50.7787892 C90.4363076,49.7744041 91.8172167,48.8770059 93.1769518,47.9574724 C95.006196,46.7225123 96.8492493,45.5096873 98.6959851,44.2876393 C99.7703323,43.5719343 100.871377,42.8774421 102.010167,42.238288 C102.50177,41.9625202 102.904996,41.5152045 103.474851,41.3372005 C103.703161,41.2615719 103.901092,41.117693 104.177273,40.9406114 C105.741383,39.944527 107.342317,39.0083922 108.967187,38.1091493 C110.938204,37.0125342 112.892651,35.8753379 114.92719,34.8866319 C115.466665,34.6246986 116.031918,34.2225757 116.782211,34.2068966 C116.375304,34.7178509 115.886462,35.0139094 115.433524,35.4169546 C115.873573,35.6447628 116.678183,34.9530375 116.767482,35.1218185 C116.891764,35.3523936 116.559425,35.7526719 116.661612,35.7028677 C116.954365,35.556222 117.215817,35.3145793 117.613519,35.2869103 C117.351146,35.7250029 116.955285,35.9334428 116.609138,36.2267343 C117.14493,36.1289705 117.549076,35.6641311 118.223881,35.61156 C117.553679,36.1879977 116.816274,36.4111944 116.185659,36.8160842 C115.71615,37.1296664 115.188642,37.3703867 114.685991,37.6387761 C114.667579,37.6443099 114.636279,37.6489214 114.636279,37.6609114 C114.541456,38.2041463 113.990934,38.3166669 113.677928,38.6782086 C114.19715,38.6551511 114.624311,38.4273429 115.039504,38.1607981 C115.205213,38.2871533 114.95757,38.3738495 115.023854,38.5297183 C116.726054,37.8960979 118.153914,36.6611378 119.935287,36.161251 C119.285339,36.5781307 118.637233,37.0125342 117.981761,37.4100457 C117.464381,37.7254724 116.994871,38.1100716 116.451714,38.3996739 C116.001538,38.6385497 115.502569,38.7934962 115.083693,39.1015445 C114.94192,39.2094536 114.632596,39.3155182 114.769767,39.5433264 C114.917064,39.8034151 115.188642,39.7360871 115.447333,39.5848299 C116.225245,39.1393588 117.012363,38.7215567 117.799481,38.2972986 C117.855638,38.2687073 117.938493,38.2926871 118.009379,38.2926871 C117.795799,38.9770339 117.116391,39.2223658 116.707642,39.8024928 C117.186358,39.7314756 117.461619,39.3920691 117.860241,39.2694032 C118.551616,39.0674194 119.204326,38.7722833 119.968429,38.7575265 C120.464636,38.7464589 120.955319,38.3987516 121.500317,38.2806972 C121.082362,38.5712218 120.647836,38.8516011 120.241849,39.1679501 C120.110202,39.2703255 119.785228,39.2629471 119.918716,39.6060428 C120.072457,40.0007873 120.320101,39.7748237 120.526316,39.6945836 C120.764753,39.6032759 120.998587,39.4750761 121.23058,39.3607109 C121.30699,39.321052 121.370512,39.3155182 121.406416,39.4086705 C121.435875,39.4861437 121.434034,39.5608501 121.332767,39.5829853 C120.842084,39.6761376 120.482127,40.018311 120.095473,40.2959234 C119.709739,40.5809142 119.346099,40.8981856 118.96681,41.2108454 C119.035855,41.4672449 119.325846,40.9941048 119.373717,41.3122984 C119.414224,41.5677756 119.158296,41.5779209 119.045982,41.6286474 C117.166104,42.4642516 115.639739,43.8624589 113.927412,44.9553848 C113.193689,45.4211465 111.183085,46.6431944 110.928078,46.7972186 C110.183307,47.243612 109.449584,47.7213635 108.723226,48.201882 C108.629324,48.2599869 108.398252,48.2719768 108.525296,48.5136195 C108.63853,48.7368162 108.756368,48.6611876 108.928521,48.5800252 C110.002869,48.0626147 111.060645,47.4870992 111.967442,46.7206677 C112.539138,46.2392269 113.227752,46.0695236 113.818781,45.6572554 C114.550662,45.1444564 117.213976,43.4898495 118.3141,42.8359386 C118.899605,42.4836199 118.874749,42.4421163 119.442763,42.6773029 C119.292704,42.9115672 118.995348,42.9420031 118.825957,43.1347639 C118.289244,43.7075124 117.694532,44.2000208 117.096138,44.6833062 C116.528124,45.1472233 115.92973,45.5696368 115.323051,45.9736044 C115.069884,46.141463 114.845256,46.310244 114.703483,46.6007686 C116.560345,45.714438 118.19258,44.4213729 120.023665,43.4769373 C119.437239,44.1354598 118.616979,44.4453527 117.917319,44.9397057 C116.828242,45.714438 115.561488,46.2134025 114.604058,47.1836624 C114.358256,47.4336058 113.979887,47.3570549 113.698181,47.5986976 C112.623834,48.5034742 111.283432,49.0042833 110.197116,49.8832355 C109.796653,50.2106522 109.346476,50.4698186 108.962584,50.8175258 C108.808842,50.9531039 108.665228,51.1015943 108.457171,51.1477093 C107.415045,51.3773621 106.828619,52.3254869 105.937472,52.7967823 C105.373141,53.0992969 104.889823,53.5659808 104.32457,53.8297587 C103.653449,54.1534861 103.056896,54.6008018 102.469549,55.006614 C101.507516,55.676204 100.592434,56.4195781 99.6294796,57.1030027 C99.1139402,57.4608552 98.469516,57.6324031 98.0727348,58.1747157 L98.0764172,58.1645704 C97.2699663,58.4938316 96.6623663,59.1200735 95.9507378,59.5922913 C94.7696003,60.3808581 93.62989,61.2210737 92.5288452,62.1175496 C92.3014555,62.3047766 92.0998427,62.517828 91.8669294,62.7013658 L91.8862621,62.6783083 C91.1009852,62.7244233 90.8671513,63.5166793 90.1739349,63.804437 C90.4804967,63.970451 89.3509131,64.4694155 89.271741,64.5256758 C88.7166155,64.9093528 88.0712707,64.8254235 87.631221,65.3225433 C87.4378937,65.5383616 87.0383507,65.7735482 86.6829968,65.9838327 C93.3205664,71.641223 100.033626,77.1667244 106.399616,82.9449361 C109.79297,86.0254192 113.40727,88.9103747 117.028013,91.7713504 C119.230103,93.5117311 125.102649,98.9883506 125.793103,99.4910043 C125.527969,99.7271132 122.106076,97.0967126 121.660503,96.7351709 Z M120.725167,110.589044 C120.084425,110.835299 115.648945,111.007769 118.786371,111.365621 C120.757388,111.586973 117.586821,111.744687 117.596948,112.45578 C118.245975,112.437334 119.226421,113.687974 119.482349,113.649237 C119.517332,113.836464 117.533426,114.365864 117.953222,114.425814 C119.638852,114.663767 116.527204,114.778133 116.732499,115.1821 C117.316163,116.334976 116.447111,115.942998 117.540791,116.471476 C118.127217,116.754622 117.954143,117.787599 117.56933,117.874295 C117.067599,117.986815 116.91662,118.256127 116.456317,118.298553 C116.392795,118.716355 116.013505,118.91096 115.510855,118.9829 C114.421778,119.389634 113.201054,119.851707 112.024519,119.971606 C111.264099,120.050924 111.298161,120.122863 110.542344,119.978984 C109.734052,120.084126 108.500439,120.151454 107.692147,120.073981 C107.024708,120.237228 97.037053,120.821967 96.2011427,120.709446 C95.5364651,120.852403 91.5382731,120.988903 90.7198543,120.871771 C89.8903882,121.029484 82.9582247,121.216711 82.2392314,121.133704 C81.3977975,121.28035 80.0997429,121.339377 79.2518648,121.226857 C78.412272,121.391026 77.1096145,121.421462 76.2589745,121.323698 C75.4341115,121.479567 57.1094481,121.040552 56.2164603,120.903129 C55.3520112,121.011038 51.0656694,120.867159 50.21595,120.720514 C49.503401,120.826578 48.4327361,120.753716 47.7174252,120.643963 C46.8879592,120.762939 45.5945077,120.696534 44.7871362,120.471493 C44.3222301,120.340526 44.0193507,120.410621 43.8195792,119.948548 C43.6557114,119.564871 43.6989798,119.331529 43.392418,119.169204 C43.0324611,118.977366 43.0112871,118.158363 43.2478829,117.850315 C42.8511017,117.007332 43.4025447,115.432043 43.0858562,114.266256 C42.8962114,113.571764 43.2681362,113.608656 43.6059986,112.977802 C43.2092174,113.002704 43.1236011,112.293455 43.1696314,112.162489 C43.4264805,111.427415 43.0499526,111.069563 43.5995544,110.446088 C43.9291314,110.072556 43.778152,109.76543 44.3682604,109.76543 C44.7954216,109.76543 45.310961,109.767275 45.7298368,109.835525 C46.6421574,109.763586 47.827898,109.808778 48.7328537,109.948968 C50.5869543,109.82169 58.9322481,110.127894 60.7338741,110.41473 C62.4572487,110.293908 64.517565,110.41473 66.2344953,110.621325 C68.0793898,110.52725 99.0181972,110.290219 100.697383,110.209979 C102.543198,110.121438 104.622847,109.841981 106.456694,110.022752 C107.775923,109.804167 109.467996,109.936056 110.767892,110.188766 C111.965601,110.147262 112.528091,109.711014 113.700022,109.772809 C113.774592,109.65291 115.569773,110.048576 115.761259,110.059644 C115.924207,109.778342 117.533426,110.022752 117.910874,110.044887 C118.325147,110.073478 121.106298,110.440554 120.725167,110.589044 Z"/>
</g>
</svg>
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’s a rectangle serving as background and a complex path that builds the IX (roman 9 rotated counter-clockwise by 90 degrees … just in case you were asking).
4. Building the symbols
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.
html<svg width=”100%” height=”100%” xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">
<symbol id=”ix” viewBox=”0 0 160 160">
<!-- Insert Symbol Content here -->
</symbol> <symbol id=”typography” viewBox=”0 0 144 16">
<!-- Insert Symbol Content here -->
</symbol>
</svg>Finally, paste the content of your exported files (everything inside the group that is named like your artboard) inside the symbol tags. Once you’re done with that your file should look like this:
html<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="ix" viewBox="0 0 160 160">
<rect id="Rectangle" width="160" height="160" fill="#000" fill-rule="nonzero" />
<path id="X" fill="#FFF" fill-rule="nonzero" d="M121.660503,96.7351709 C121.734151,96.9832696 121.863036,97.1972433 122.05176,97.3853926 C120.099155,96.2334395 118.385907,94.7725157 116.523521,93.5034304 C116.668056,94.1610306 120.641392,96.3275141 120.399273,96.7729852 C120.343116,96.8910396 115.252164,93.1160643 115.178516,93.1787807 C114.862748,93.4065889 116.0356,94.6157247 115.787036,94.5594643 C115.833067,94.598201 116.741705,95.2687133 116.637676,95.378467 C116.428699,95.4559403 122.086744,99.7022111 121.589616,100.302629 C121.388004,100.53966 119.845988,99.127618 119.637011,99.0270872 C119.785228,99.2678076 119.957382,99.4863928 120.159915,99.6856097 C118.955762,98.9699046 117.983602,97.9802763 116.843892,97.1852534 C116.994871,97.4674773 117.20569,97.7063531 117.472666,97.9009585 C116.522601,97.9074146 114.507394,95.5075891 113.687134,95.0233814 C113.42292,94.8795026 112.16261,93.6519208 111.973886,93.7284717 C111.955474,93.8031781 111.975727,93.870506 112.033725,93.9267663 C111.556852,93.7026473 111.143499,93.4065889 110.793669,93.032135 C110.815764,93.2341187 109.474441,91.3148117 108.938648,91.5527652 C109.267304,91.8718811 109.593199,92.1919193 109.916332,92.5128799 C108.83554,92.7480665 107.967409,90.0374257 106.509169,90.6479886 C106.627006,90.5991066 112.52717,96.2020813 112.684594,96.5885251 C112.666182,96.5424101 112.335684,96.4732376 112.321875,96.4308117 C112.682753,97.6288799 114.346288,98.7485525 115.166548,99.6219709 C113.25537,98.3003145 111.408634,96.4962951 109.514947,95.4651633 C108.772018,95.0611957 108.536343,94.2855411 107.823794,94.6876641 C107.670053,94.7715934 106.069119,93.6657553 105.881315,93.4785283 C105.847253,93.7736644 105.896966,94.0531214 106.026771,94.3196662 C104.529866,93.1354326 103.110291,91.3913626 101.357457,90.5474578 C101.759762,91.1229732 102.143655,91.5988802 102.253207,91.8488236 C102.378409,92.1292029 102.573578,92.3191968 102.635258,92.6364681 C100.112798,90.6138635 97.6105905,88.5257755 95.2087294,86.3574474 C94.6876663,85.8898411 92.0252737,83.4346776 91.6054773,84.1863523 C90.7511549,83.4106977 85.0369532,78.510516 83.8604186,78.2753294 C84.8086429,79.0583624 85.6399501,79.953916 86.5642386,80.7544727 C86.3423725,80.9269429 83.9165756,78.8139528 83.5731895,78.5243505 C82.9766368,78.0272306 81.0737441,76.3541778 80.225866,75.5785232 C79.5400145,74.9532036 78.8817811,74.33434 78.2171036,73.7210103 C76.9816502,74.6949595 74.8927951,76.4565531 74.5972806,76.692662 C74.2428473,76.9831866 73.8304158,77.159346 73.476903,77.5328776 C72.5286788,78.5391073 71.4267134,79.4116034 70.3137007,80.2481299 C68.906094,81.3060084 67.655911,82.554803 66.2289716,83.6385059 C66.2446219,83.4494344 66.4701704,83.4106977 66.3679831,83.1561429 C65.9978995,83.4494344 65.6314983,83.7159792 65.2899535,84.0175714 C63.3796959,85.6721782 61.470359,87.3258627 59.5729899,88.9924594 C58.149733,90.2430987 56.7725063,91.5481537 55.3188694,92.7665125 C53.7206973,94.0983142 52.1943324,95.5131229 50.6090488,96.8550699 C49.0007501,98.2209967 52.8470421,95.7206405 51.3630252,97.2267569 C51.1135409,97.4748557 50.8180264,97.6879071 50.5114646,97.8576104 C50.1266513,98.0771179 49.8559931,98.4082237 49.5162895,98.6710793 C49.1268731,98.9671377 48.6601258,99.1792668 48.1998228,99.4448893 C48.2458531,98.9265565 48.2421707,98.9431579 47.7303137,98.7919006 C47.3326119,98.6738462 47.0269707,98.3473519 46.8014222,98.0568273 C46.4736865,97.6288799 45.5512392,95.8377726 45.2474392,94.5281061 C45.2244241,94.4423322 45.2179798,94.33719 45.2391538,94.2578721 C45.4904792,93.2682439 45.2216622,92.3256529 44.8930059,91.3913626 C44.4953041,90.2680008 44.537652,89.0957571 44.4437501,87.9419593 C44.3885138,87.2244097 44.9629719,86.7752494 45.3965774,86.3168661 C46.2978507,85.35214 47.1889974,84.3468326 48.2191555,83.5213738 C48.8911979,82.9799835 49.5356222,82.3648092 50.3577234,81.9903552 C50.97545,81.7053644 51.3455337,81.0865009 51.8251694,80.61705 C52.3867391,80.0645921 53.0265603,79.582229 53.5540676,79.0177812 C54.326456,78.1987785 55.4790548,77.7809764 56.2477609,76.9518284 C56.9170415,76.2287449 63.6807341,70.6017905 64.6050226,69.8187575 C66.1396728,68.5256925 67.5795007,67.2363166 69.1067861,65.9727651 C68.8904437,65.7864604 68.6759425,65.6020004 68.454997,65.4092396 C66.6634977,63.859775 64.6630207,62.0529886 62.7997141,60.5072132 C60.9529784,58.977117 59.1403051,57.3215878 57.2981724,55.7177075 C54.3945809,53.1915269 51.6290803,51.5184741 48.6490786,49.0503983 C47.1089046,47.7785462 43.7551368,45.4857075 43.4145126,43.4446568 C43.1788374,42.0270812 45.1461725,40.5735358 45.8007234,39.6014313 C45.7731053,39.6401679 48.7503452,34.9816288 49.6866016,35.3662281 C49.9646246,35.4833602 50.3319464,35.080315 50.9938622,35.3284138 C52.0829391,35.7360705 52.824027,36.6980298 53.6369221,37.4644614 C56.2560463,39.9399155 58.9920875,42.2890145 61.7051135,44.6473365 C67.3373813,49.543829 72.7100382,53.8445155 78.2051357,58.6192644 C78.5255066,58.3794663 78.8486393,58.135979 79.1680896,57.8906472 C80.295832,57.0310632 81.4815726,56.2378849 82.6212829,55.387524 C84.072158,54.3213448 85.5460483,53.2939022 87.0199386,52.2535474 C87.7186786,51.7545829 88.451481,51.2980443 89.1318089,50.7787892 C90.4363076,49.7744041 91.8172167,48.8770059 93.1769518,47.9574724 C95.006196,46.7225123 96.8492493,45.5096873 98.6959851,44.2876393 C99.7703323,43.5719343 100.871377,42.8774421 102.010167,42.238288 C102.50177,41.9625202 102.904996,41.5152045 103.474851,41.3372005 C103.703161,41.2615719 103.901092,41.117693 104.177273,40.9406114 C105.741383,39.944527 107.342317,39.0083922 108.967187,38.1091493 C110.938204,37.0125342 112.892651,35.8753379 114.92719,34.8866319 C115.466665,34.6246986 116.031918,34.2225757 116.782211,34.2068966 C116.375304,34.7178509 115.886462,35.0139094 115.433524,35.4169546 C115.873573,35.6447628 116.678183,34.9530375 116.767482,35.1218185 C116.891764,35.3523936 116.559425,35.7526719 116.661612,35.7028677 C116.954365,35.556222 117.215817,35.3145793 117.613519,35.2869103 C117.351146,35.7250029 116.955285,35.9334428 116.609138,36.2267343 C117.14493,36.1289705 117.549076,35.6641311 118.223881,35.61156 C117.553679,36.1879977 116.816274,36.4111944 116.185659,36.8160842 C115.71615,37.1296664 115.188642,37.3703867 114.685991,37.6387761 C114.667579,37.6443099 114.636279,37.6489214 114.636279,37.6609114 C114.541456,38.2041463 113.990934,38.3166669 113.677928,38.6782086 C114.19715,38.6551511 114.624311,38.4273429 115.039504,38.1607981 C115.205213,38.2871533 114.95757,38.3738495 115.023854,38.5297183 C116.726054,37.8960979 118.153914,36.6611378 119.935287,36.161251 C119.285339,36.5781307 118.637233,37.0125342 117.981761,37.4100457 C117.464381,37.7254724 116.994871,38.1100716 116.451714,38.3996739 C116.001538,38.6385497 115.502569,38.7934962 115.083693,39.1015445 C114.94192,39.2094536 114.632596,39.3155182 114.769767,39.5433264 C114.917064,39.8034151 115.188642,39.7360871 115.447333,39.5848299 C116.225245,39.1393588 117.012363,38.7215567 117.799481,38.2972986 C117.855638,38.2687073 117.938493,38.2926871 118.009379,38.2926871 C117.795799,38.9770339 117.116391,39.2223658 116.707642,39.8024928 C117.186358,39.7314756 117.461619,39.3920691 117.860241,39.2694032 C118.551616,39.0674194 119.204326,38.7722833 119.968429,38.7575265 C120.464636,38.7464589 120.955319,38.3987516 121.500317,38.2806972 C121.082362,38.5712218 120.647836,38.8516011 120.241849,39.1679501 C120.110202,39.2703255 119.785228,39.2629471 119.918716,39.6060428 C120.072457,40.0007873 120.320101,39.7748237 120.526316,39.6945836 C120.764753,39.6032759 120.998587,39.4750761 121.23058,39.3607109 C121.30699,39.321052 121.370512,39.3155182 121.406416,39.4086705 C121.435875,39.4861437 121.434034,39.5608501 121.332767,39.5829853 C120.842084,39.6761376 120.482127,40.018311 120.095473,40.2959234 C119.709739,40.5809142 119.346099,40.8981856 118.96681,41.2108454 C119.035855,41.4672449 119.325846,40.9941048 119.373717,41.3122984 C119.414224,41.5677756 119.158296,41.5779209 119.045982,41.6286474 C117.166104,42.4642516 115.639739,43.8624589 113.927412,44.9553848 C113.193689,45.4211465 111.183085,46.6431944 110.928078,46.7972186 C110.183307,47.243612 109.449584,47.7213635 108.723226,48.201882 C108.629324,48.2599869 108.398252,48.2719768 108.525296,48.5136195 C108.63853,48.7368162 108.756368,48.6611876 108.928521,48.5800252 C110.002869,48.0626147 111.060645,47.4870992 111.967442,46.7206677 C112.539138,46.2392269 113.227752,46.0695236 113.818781,45.6572554 C114.550662,45.1444564 117.213976,43.4898495 118.3141,42.8359386 C118.899605,42.4836199 118.874749,42.4421163 119.442763,42.6773029 C119.292704,42.9115672 118.995348,42.9420031 118.825957,43.1347639 C118.289244,43.7075124 117.694532,44.2000208 117.096138,44.6833062 C116.528124,45.1472233 115.92973,45.5696368 115.323051,45.9736044 C115.069884,46.141463 114.845256,46.310244 114.703483,46.6007686 C116.560345,45.714438 118.19258,44.4213729 120.023665,43.4769373 C119.437239,44.1354598 118.616979,44.4453527 117.917319,44.9397057 C116.828242,45.714438 115.561488,46.2134025 114.604058,47.1836624 C114.358256,47.4336058 113.979887,47.3570549 113.698181,47.5986976 C112.623834,48.5034742 111.283432,49.0042833 110.197116,49.8832355 C109.796653,50.2106522 109.346476,50.4698186 108.962584,50.8175258 C108.808842,50.9531039 108.665228,51.1015943 108.457171,51.1477093 C107.415045,51.3773621 106.828619,52.3254869 105.937472,52.7967823 C105.373141,53.0992969 104.889823,53.5659808 104.32457,53.8297587 C103.653449,54.1534861 103.056896,54.6008018 102.469549,55.006614 C101.507516,55.676204 100.592434,56.4195781 99.6294796,57.1030027 C99.1139402,57.4608552 98.469516,57.6324031 98.0727348,58.1747157 L98.0764172,58.1645704 C97.2699663,58.4938316 96.6623663,59.1200735 95.9507378,59.5922913 C94.7696003,60.3808581 93.62989,61.2210737 92.5288452,62.1175496 C92.3014555,62.3047766 92.0998427,62.517828 91.8669294,62.7013658 L91.8862621,62.6783083 C91.1009852,62.7244233 90.8671513,63.5166793 90.1739349,63.804437 C90.4804967,63.970451 89.3509131,64.4694155 89.271741,64.5256758 C88.7166155,64.9093528 88.0712707,64.8254235 87.631221,65.3225433 C87.4378937,65.5383616 87.0383507,65.7735482 86.6829968,65.9838327 C93.3205664,71.641223 100.033626,77.1667244 106.399616,82.9449361 C109.79297,86.0254192 113.40727,88.9103747 117.028013,91.7713504 C119.230103,93.5117311 125.102649,98.9883506 125.793103,99.4910043 C125.527969,99.7271132 122.106076,97.0967126 121.660503,96.7351709 Z M120.725167,110.589044 C120.084425,110.835299 115.648945,111.007769 118.786371,111.365621 C120.757388,111.586973 117.586821,111.744687 117.596948,112.45578 C118.245975,112.437334 119.226421,113.687974 119.482349,113.649237 C119.517332,113.836464 117.533426,114.365864 117.953222,114.425814 C119.638852,114.663767 116.527204,114.778133 116.732499,115.1821 C117.316163,116.334976 116.447111,115.942998 117.540791,116.471476 C118.127217,116.754622 117.954143,117.787599 117.56933,117.874295 C117.067599,117.986815 116.91662,118.256127 116.456317,118.298553 C116.392795,118.716355 116.013505,118.91096 115.510855,118.9829 C114.421778,119.389634 113.201054,119.851707 112.024519,119.971606 C111.264099,120.050924 111.298161,120.122863 110.542344,119.978984 C109.734052,120.084126 108.500439,120.151454 107.692147,120.073981 C107.024708,120.237228 97.037053,120.821967 96.2011427,120.709446 C95.5364651,120.852403 91.5382731,120.988903 90.7198543,120.871771 C89.8903882,121.029484 82.9582247,121.216711 82.2392314,121.133704 C81.3977975,121.28035 80.0997429,121.339377 79.2518648,121.226857 C78.412272,121.391026 77.1096145,121.421462 76.2589745,121.323698 C75.4341115,121.479567 57.1094481,121.040552 56.2164603,120.903129 C55.3520112,121.011038 51.0656694,120.867159 50.21595,120.720514 C49.503401,120.826578 48.4327361,120.753716 47.7174252,120.643963 C46.8879592,120.762939 45.5945077,120.696534 44.7871362,120.471493 C44.3222301,120.340526 44.0193507,120.410621 43.8195792,119.948548 C43.6557114,119.564871 43.6989798,119.331529 43.392418,119.169204 C43.0324611,118.977366 43.0112871,118.158363 43.2478829,117.850315 C42.8511017,117.007332 43.4025447,115.432043 43.0858562,114.266256 C42.8962114,113.571764 43.2681362,113.608656 43.6059986,112.977802 C43.2092174,113.002704 43.1236011,112.293455 43.1696314,112.162489 C43.4264805,111.427415 43.0499526,111.069563 43.5995544,110.446088 C43.9291314,110.072556 43.778152,109.76543 44.3682604,109.76543 C44.7954216,109.76543 45.310961,109.767275 45.7298368,109.835525 C46.6421574,109.763586 47.827898,109.808778 48.7328537,109.948968 C50.5869543,109.82169 58.9322481,110.127894 60.7338741,110.41473 C62.4572487,110.293908 64.517565,110.41473 66.2344953,110.621325 C68.0793898,110.52725 99.0181972,110.290219 100.697383,110.209979 C102.543198,110.121438 104.622847,109.841981 106.456694,110.022752 C107.775923,109.804167 109.467996,109.936056 110.767892,110.188766 C111.965601,110.147262 112.528091,109.711014 113.700022,109.772809 C113.774592,109.65291 115.569773,110.048576 115.761259,110.059644 C115.924207,109.778342 117.533426,110.022752 117.910874,110.044887 C118.325147,110.073478 121.106298,110.440554 120.725167,110.589044 Z"
/>
</symbol>
<symbol id="typography" viewBox="0 0 144 16">
<path fill="#000" d="M34.98 12.42h7.64v3.26H31.26V.34h3.72v12.08zm-19.04 3.26H27.5v-3.21h-7.85V9.65h6.85V6.51h-6.85V3.56h7.85V.34H15.94v15.34zm29.85 0h11.57v-3.21H49.5V9.65h6.85V6.51H49.5V3.56h7.85V.34H45.79v15.34zM10.66 1.65a5.37 5.37 0 0 1 1.7 3.95c0 1.14-.4 2.29-1.31 3.72l-4 6.36H2.86l2.91-4.57.02-.04h-.1C2.34 10.86 0 8.64 0 5.66 0 2.38 2.6 0 6.2 0c1.75 0 3.33.58 4.46 1.65zM8.92 5.53A2.65 2.65 0 0 0 6.2 2.95 2.66 2.66 0 0 0 3.5 5.53 2.65 2.65 0 0 0 6.2 8.11c1.5 0 2.72-1.15 2.72-2.58zM69.4 8.65L63.86.35h-2.74v15.33h3.7V7.72l3.56 5.53h2.04l3.55-5.48v7.91h3.72V.34h-2.77L69.4 8.65zm45.13-5h4.94v12.03h3.72V3.65h4.9V.35h-13.56v3.3zm24.33 3.04l-2.17-.5c-1.09-.24-1.82-.59-1.82-1.52 0-.5.22-.92.64-1.2.4-.27.96-.41 1.63-.41 1.45 0 2.31.65 2.56 1.95h3.74C143.31 3.8 142.45 0 136.9 0c-1.78 0-3.3.47-4.4 1.35A4.52 4.52 0 0 0 130.82 5c0 2.4 1.41 3.83 4.43 4.48l2.55.57c1.14.22 1.7.67 1.7 1.38 0 .91-.83 1.43-2.26 1.43-1.82 0-3.02-.8-3.3-2.18h-3.72a5.4 5.4 0 0 0 2.29 4.04 8 8 0 0 0 4.62 1.29c3.86 0 6.35-1.95 6.35-4.96 0-2.35-1.38-3.65-4.61-4.35zm-56.98 9h11.57v-3.22H85.6V9.65h6.84V6.51H85.6V3.56h7.85V.34H81.88v15.34zm25.72-6.53L100.05.34H97.2v15.34h3.71v-8.6l7.51 8.6h2.89V.34h-3.72v8.82z"
/>
</symbol>
</svg>5. Using our symbols
So far so good. Sadly, if you open the file in a browser, you won’t see anything. For now, we defined our symbols, but never placed them anywhere. To insert a symbol you need a use-tag in your file:
html<use xlink:href=”#ix” x=”0" y=”0" width=”100" height=”100”/>Now let’s see what exactly is happening here.
First the xlink:href points to a symbol with a unique ID and will render its contents… well, it’s not really rendered, but cloned and suddenly there is a weird thing coming up called the Shadow DOM. It may sound like something from Stranger Things, but you don’t need to be afraid. As long as you don’t want to change anything inside the symbol instance via CSS, there is nothing to worry about.
Next we have the x, y, width and height 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 viewBox attribute set in the SVG tag. Since we did not set a viewBox and only defined width and height (100%), one unit matches one pixel and our symbol will have a width of 100px. And it doesn’t matter if you change the width of the SVG. It will always stay at at 100px width.
Try changing the width and height attributes inside this CodePen. 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 preserveAspectRatio. Check out @SaraSoueidan’s Article on Understanding SVG Coordinate Systems and Transformation if you want to learn more about it.
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:
html<use xlink:href=”#ix” x=”5%" y=”5%" width=”90%" height=”90%”/>(Maybe you think that setting width or height to ‘auto’ is a good idea… well, it’s not. Safari and Firefox simply ignore it while Chrome won’t render anything.)
6. Combining symbols inside a new symbol
For the portrait version, we’ll 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 viewBox 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.
Now, we only have to translate all the numbers to our new SVG symbol, which will then look like this:
html<symbol id=”portrait” viewBox=”0 0 160 180">
<use xlink:href=”#ix” x=”40" y=”32" width=”80" height=”80"/>
<use xlink:href=”#typo” x=”3" y=”130" width=”154" height=”16"/>
</symbol>When we use this symbol, we wouldn’t want it at 100% width, so let’s just scale it down like our square symbol.
html<use xlink:href=”#portrait” x=”5%" y=”5%" width=”90%" height=”90%”/>7. Hide and show
Up to this point we created three symbols and have two use tags in our SVG.
html<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="ix" viewBox="0 0 160 160">
<rect id="Rectangle" width="160" height="160" fill="#000" fill-rule="nonzero" />
<path id="X" fill="#FFF" fill-rule="nonzero" d="M121.660503,96.7351709 C121.734151,96.9832696 121.863036,97.1972433 122.05176,97.3853926 C120.099155,96.2334395 118.385907,94.7725157 116.523521,93.5034304 C116.668056,94.1610306 120.641392,96.3275141 120.399273,96.7729852 C120.343116,96.8910396 115.252164,93.1160643 115.178516,93.1787807 C114.862748,93.4065889 116.0356,94.6157247 115.787036,94.5594643 C115.833067,94.598201 116.741705,95.2687133 116.637676,95.378467 C116.428699,95.4559403 122.086744,99.7022111 121.589616,100.302629 C121.388004,100.53966 119.845988,99.127618 119.637011,99.0270872 C119.785228,99.2678076 119.957382,99.4863928 120.159915,99.6856097 C118.955762,98.9699046 117.983602,97.9802763 116.843892,97.1852534 C116.994871,97.4674773 117.20569,97.7063531 117.472666,97.9009585 C116.522601,97.9074146 114.507394,95.5075891 113.687134,95.0233814 C113.42292,94.8795026 112.16261,93.6519208 111.973886,93.7284717 C111.955474,93.8031781 111.975727,93.870506 112.033725,93.9267663 C111.556852,93.7026473 111.143499,93.4065889 110.793669,93.032135 C110.815764,93.2341187 109.474441,91.3148117 108.938648,91.5527652 C109.267304,91.8718811 109.593199,92.1919193 109.916332,92.5128799 C108.83554,92.7480665 107.967409,90.0374257 106.509169,90.6479886 C106.627006,90.5991066 112.52717,96.2020813 112.684594,96.5885251 C112.666182,96.5424101 112.335684,96.4732376 112.321875,96.4308117 C112.682753,97.6288799 114.346288,98.7485525 115.166548,99.6219709 C113.25537,98.3003145 111.408634,96.4962951 109.514947,95.4651633 C108.772018,95.0611957 108.536343,94.2855411 107.823794,94.6876641 C107.670053,94.7715934 106.069119,93.6657553 105.881315,93.4785283 C105.847253,93.7736644 105.896966,94.0531214 106.026771,94.3196662 C104.529866,93.1354326 103.110291,91.3913626 101.357457,90.5474578 C101.759762,91.1229732 102.143655,91.5988802 102.253207,91.8488236 C102.378409,92.1292029 102.573578,92.3191968 102.635258,92.6364681 C100.112798,90.6138635 97.6105905,88.5257755 95.2087294,86.3574474 C94.6876663,85.8898411 92.0252737,83.4346776 91.6054773,84.1863523 C90.7511549,83.4106977 85.0369532,78.510516 83.8604186,78.2753294 C84.8086429,79.0583624 85.6399501,79.953916 86.5642386,80.7544727 C86.3423725,80.9269429 83.9165756,78.8139528 83.5731895,78.5243505 C82.9766368,78.0272306 81.0737441,76.3541778 80.225866,75.5785232 C79.5400145,74.9532036 78.8817811,74.33434 78.2171036,73.7210103 C76.9816502,74.6949595 74.8927951,76.4565531 74.5972806,76.692662 C74.2428473,76.9831866 73.8304158,77.159346 73.476903,77.5328776 C72.5286788,78.5391073 71.4267134,79.4116034 70.3137007,80.2481299 C68.906094,81.3060084 67.655911,82.554803 66.2289716,83.6385059 C66.2446219,83.4494344 66.4701704,83.4106977 66.3679831,83.1561429 C65.9978995,83.4494344 65.6314983,83.7159792 65.2899535,84.0175714 C63.3796959,85.6721782 61.470359,87.3258627 59.5729899,88.9924594 C58.149733,90.2430987 56.7725063,91.5481537 55.3188694,92.7665125 C53.7206973,94.0983142 52.1943324,95.5131229 50.6090488,96.8550699 C49.0007501,98.2209967 52.8470421,95.7206405 51.3630252,97.2267569 C51.1135409,97.4748557 50.8180264,97.6879071 50.5114646,97.8576104 C50.1266513,98.0771179 49.8559931,98.4082237 49.5162895,98.6710793 C49.1268731,98.9671377 48.6601258,99.1792668 48.1998228,99.4448893 C48.2458531,98.9265565 48.2421707,98.9431579 47.7303137,98.7919006 C47.3326119,98.6738462 47.0269707,98.3473519 46.8014222,98.0568273 C46.4736865,97.6288799 45.5512392,95.8377726 45.2474392,94.5281061 C45.2244241,94.4423322 45.2179798,94.33719 45.2391538,94.2578721 C45.4904792,93.2682439 45.2216622,92.3256529 44.8930059,91.3913626 C44.4953041,90.2680008 44.537652,89.0957571 44.4437501,87.9419593 C44.3885138,87.2244097 44.9629719,86.7752494 45.3965774,86.3168661 C46.2978507,85.35214 47.1889974,84.3468326 48.2191555,83.5213738 C48.8911979,82.9799835 49.5356222,82.3648092 50.3577234,81.9903552 C50.97545,81.7053644 51.3455337,81.0865009 51.8251694,80.61705 C52.3867391,80.0645921 53.0265603,79.582229 53.5540676,79.0177812 C54.326456,78.1987785 55.4790548,77.7809764 56.2477609,76.9518284 C56.9170415,76.2287449 63.6807341,70.6017905 64.6050226,69.8187575 C66.1396728,68.5256925 67.5795007,67.2363166 69.1067861,65.9727651 C68.8904437,65.7864604 68.6759425,65.6020004 68.454997,65.4092396 C66.6634977,63.859775 64.6630207,62.0529886 62.7997141,60.5072132 C60.9529784,58.977117 59.1403051,57.3215878 57.2981724,55.7177075 C54.3945809,53.1915269 51.6290803,51.5184741 48.6490786,49.0503983 C47.1089046,47.7785462 43.7551368,45.4857075 43.4145126,43.4446568 C43.1788374,42.0270812 45.1461725,40.5735358 45.8007234,39.6014313 C45.7731053,39.6401679 48.7503452,34.9816288 49.6866016,35.3662281 C49.9646246,35.4833602 50.3319464,35.080315 50.9938622,35.3284138 C52.0829391,35.7360705 52.824027,36.6980298 53.6369221,37.4644614 C56.2560463,39.9399155 58.9920875,42.2890145 61.7051135,44.6473365 C67.3373813,49.543829 72.7100382,53.8445155 78.2051357,58.6192644 C78.5255066,58.3794663 78.8486393,58.135979 79.1680896,57.8906472 C80.295832,57.0310632 81.4815726,56.2378849 82.6212829,55.387524 C84.072158,54.3213448 85.5460483,53.2939022 87.0199386,52.2535474 C87.7186786,51.7545829 88.451481,51.2980443 89.1318089,50.7787892 C90.4363076,49.7744041 91.8172167,48.8770059 93.1769518,47.9574724 C95.006196,46.7225123 96.8492493,45.5096873 98.6959851,44.2876393 C99.7703323,43.5719343 100.871377,42.8774421 102.010167,42.238288 C102.50177,41.9625202 102.904996,41.5152045 103.474851,41.3372005 C103.703161,41.2615719 103.901092,41.117693 104.177273,40.9406114 C105.741383,39.944527 107.342317,39.0083922 108.967187,38.1091493 C110.938204,37.0125342 112.892651,35.8753379 114.92719,34.8866319 C115.466665,34.6246986 116.031918,34.2225757 116.782211,34.2068966 C116.375304,34.7178509 115.886462,35.0139094 115.433524,35.4169546 C115.873573,35.6447628 116.678183,34.9530375 116.767482,35.1218185 C116.891764,35.3523936 116.559425,35.7526719 116.661612,35.7028677 C116.954365,35.556222 117.215817,35.3145793 117.613519,35.2869103 C117.351146,35.7250029 116.955285,35.9334428 116.609138,36.2267343 C117.14493,36.1289705 117.549076,35.6641311 118.223881,35.61156 C117.553679,36.1879977 116.816274,36.4111944 116.185659,36.8160842 C115.71615,37.1296664 115.188642,37.3703867 114.685991,37.6387761 C114.667579,37.6443099 114.636279,37.6489214 114.636279,37.6609114 C114.541456,38.2041463 113.990934,38.3166669 113.677928,38.6782086 C114.19715,38.6551511 114.624311,38.4273429 115.039504,38.1607981 C115.205213,38.2871533 114.95757,38.3738495 115.023854,38.5297183 C116.726054,37.8960979 118.153914,36.6611378 119.935287,36.161251 C119.285339,36.5781307 118.637233,37.0125342 117.981761,37.4100457 C117.464381,37.7254724 116.994871,38.1100716 116.451714,38.3996739 C116.001538,38.6385497 115.502569,38.7934962 115.083693,39.1015445 C114.94192,39.2094536 114.632596,39.3155182 114.769767,39.5433264 C114.917064,39.8034151 115.188642,39.7360871 115.447333,39.5848299 C116.225245,39.1393588 117.012363,38.7215567 117.799481,38.2972986 C117.855638,38.2687073 117.938493,38.2926871 118.009379,38.2926871 C117.795799,38.9770339 117.116391,39.2223658 116.707642,39.8024928 C117.186358,39.7314756 117.461619,39.3920691 117.860241,39.2694032 C118.551616,39.0674194 119.204326,38.7722833 119.968429,38.7575265 C120.464636,38.7464589 120.955319,38.3987516 121.500317,38.2806972 C121.082362,38.5712218 120.647836,38.8516011 120.241849,39.1679501 C120.110202,39.2703255 119.785228,39.2629471 119.918716,39.6060428 C120.072457,40.0007873 120.320101,39.7748237 120.526316,39.6945836 C120.764753,39.6032759 120.998587,39.4750761 121.23058,39.3607109 C121.30699,39.321052 121.370512,39.3155182 121.406416,39.4086705 C121.435875,39.4861437 121.434034,39.5608501 121.332767,39.5829853 C120.842084,39.6761376 120.482127,40.018311 120.095473,40.2959234 C119.709739,40.5809142 119.346099,40.8981856 118.96681,41.2108454 C119.035855,41.4672449 119.325846,40.9941048 119.373717,41.3122984 C119.414224,41.5677756 119.158296,41.5779209 119.045982,41.6286474 C117.166104,42.4642516 115.639739,43.8624589 113.927412,44.9553848 C113.193689,45.4211465 111.183085,46.6431944 110.928078,46.7972186 C110.183307,47.243612 109.449584,47.7213635 108.723226,48.201882 C108.629324,48.2599869 108.398252,48.2719768 108.525296,48.5136195 C108.63853,48.7368162 108.756368,48.6611876 108.928521,48.5800252 C110.002869,48.0626147 111.060645,47.4870992 111.967442,46.7206677 C112.539138,46.2392269 113.227752,46.0695236 113.818781,45.6572554 C114.550662,45.1444564 117.213976,43.4898495 118.3141,42.8359386 C118.899605,42.4836199 118.874749,42.4421163 119.442763,42.6773029 C119.292704,42.9115672 118.995348,42.9420031 118.825957,43.1347639 C118.289244,43.7075124 117.694532,44.2000208 117.096138,44.6833062 C116.528124,45.1472233 115.92973,45.5696368 115.323051,45.9736044 C115.069884,46.141463 114.845256,46.310244 114.703483,46.6007686 C116.560345,45.714438 118.19258,44.4213729 120.023665,43.4769373 C119.437239,44.1354598 118.616979,44.4453527 117.917319,44.9397057 C116.828242,45.714438 115.561488,46.2134025 114.604058,47.1836624 C114.358256,47.4336058 113.979887,47.3570549 113.698181,47.5986976 C112.623834,48.5034742 111.283432,49.0042833 110.197116,49.8832355 C109.796653,50.2106522 109.346476,50.4698186 108.962584,50.8175258 C108.808842,50.9531039 108.665228,51.1015943 108.457171,51.1477093 C107.415045,51.3773621 106.828619,52.3254869 105.937472,52.7967823 C105.373141,53.0992969 104.889823,53.5659808 104.32457,53.8297587 C103.653449,54.1534861 103.056896,54.6008018 102.469549,55.006614 C101.507516,55.676204 100.592434,56.4195781 99.6294796,57.1030027 C99.1139402,57.4608552 98.469516,57.6324031 98.0727348,58.1747157 L98.0764172,58.1645704 C97.2699663,58.4938316 96.6623663,59.1200735 95.9507378,59.5922913 C94.7696003,60.3808581 93.62989,61.2210737 92.5288452,62.1175496 C92.3014555,62.3047766 92.0998427,62.517828 91.8669294,62.7013658 L91.8862621,62.6783083 C91.1009852,62.7244233 90.8671513,63.5166793 90.1739349,63.804437 C90.4804967,63.970451 89.3509131,64.4694155 89.271741,64.5256758 C88.7166155,64.9093528 88.0712707,64.8254235 87.631221,65.3225433 C87.4378937,65.5383616 87.0383507,65.7735482 86.6829968,65.9838327 C93.3205664,71.641223 100.033626,77.1667244 106.399616,82.9449361 C109.79297,86.0254192 113.40727,88.9103747 117.028013,91.7713504 C119.230103,93.5117311 125.102649,98.9883506 125.793103,99.4910043 C125.527969,99.7271132 122.106076,97.0967126 121.660503,96.7351709 Z M120.725167,110.589044 C120.084425,110.835299 115.648945,111.007769 118.786371,111.365621 C120.757388,111.586973 117.586821,111.744687 117.596948,112.45578 C118.245975,112.437334 119.226421,113.687974 119.482349,113.649237 C119.517332,113.836464 117.533426,114.365864 117.953222,114.425814 C119.638852,114.663767 116.527204,114.778133 116.732499,115.1821 C117.316163,116.334976 116.447111,115.942998 117.540791,116.471476 C118.127217,116.754622 117.954143,117.787599 117.56933,117.874295 C117.067599,117.986815 116.91662,118.256127 116.456317,118.298553 C116.392795,118.716355 116.013505,118.91096 115.510855,118.9829 C114.421778,119.389634 113.201054,119.851707 112.024519,119.971606 C111.264099,120.050924 111.298161,120.122863 110.542344,119.978984 C109.734052,120.084126 108.500439,120.151454 107.692147,120.073981 C107.024708,120.237228 97.037053,120.821967 96.2011427,120.709446 C95.5364651,120.852403 91.5382731,120.988903 90.7198543,120.871771 C89.8903882,121.029484 82.9582247,121.216711 82.2392314,121.133704 C81.3977975,121.28035 80.0997429,121.339377 79.2518648,121.226857 C78.412272,121.391026 77.1096145,121.421462 76.2589745,121.323698 C75.4341115,121.479567 57.1094481,121.040552 56.2164603,120.903129 C55.3520112,121.011038 51.0656694,120.867159 50.21595,120.720514 C49.503401,120.826578 48.4327361,120.753716 47.7174252,120.643963 C46.8879592,120.762939 45.5945077,120.696534 44.7871362,120.471493 C44.3222301,120.340526 44.0193507,120.410621 43.8195792,119.948548 C43.6557114,119.564871 43.6989798,119.331529 43.392418,119.169204 C43.0324611,118.977366 43.0112871,118.158363 43.2478829,117.850315 C42.8511017,117.007332 43.4025447,115.432043 43.0858562,114.266256 C42.8962114,113.571764 43.2681362,113.608656 43.6059986,112.977802 C43.2092174,113.002704 43.1236011,112.293455 43.1696314,112.162489 C43.4264805,111.427415 43.0499526,111.069563 43.5995544,110.446088 C43.9291314,110.072556 43.778152,109.76543 44.3682604,109.76543 C44.7954216,109.76543 45.310961,109.767275 45.7298368,109.835525 C46.6421574,109.763586 47.827898,109.808778 48.7328537,109.948968 C50.5869543,109.82169 58.9322481,110.127894 60.7338741,110.41473 C62.4572487,110.293908 64.517565,110.41473 66.2344953,110.621325 C68.0793898,110.52725 99.0181972,110.290219 100.697383,110.209979 C102.543198,110.121438 104.622847,109.841981 106.456694,110.022752 C107.775923,109.804167 109.467996,109.936056 110.767892,110.188766 C111.965601,110.147262 112.528091,109.711014 113.700022,109.772809 C113.774592,109.65291 115.569773,110.048576 115.761259,110.059644 C115.924207,109.778342 117.533426,110.022752 117.910874,110.044887 C118.325147,110.073478 121.106298,110.440554 120.725167,110.589044 Z"
/>
</symbol>
<symbol id="typography" viewBox="0 0 144 16">
<path fill="#000" d="M34.98 12.42h7.64v3.26H31.26V.34h3.72v12.08zm-19.04 3.26H27.5v-3.21h-7.85V9.65h6.85V6.51h-6.85V3.56h7.85V.34H15.94v15.34zm29.85 0h11.57v-3.21H49.5V9.65h6.85V6.51H49.5V3.56h7.85V.34H45.79v15.34zM10.66 1.65a5.37 5.37 0 0 1 1.7 3.95c0 1.14-.4 2.29-1.31 3.72l-4 6.36H2.86l2.91-4.57.02-.04h-.1C2.34 10.86 0 8.64 0 5.66 0 2.38 2.6 0 6.2 0c1.75 0 3.33.58 4.46 1.65zM8.92 5.53A2.65 2.65 0 0 0 6.2 2.95 2.66 2.66 0 0 0 3.5 5.53 2.65 2.65 0 0 0 6.2 8.11c1.5 0 2.72-1.15 2.72-2.58zM69.4 8.65L63.86.35h-2.74v15.33h3.7V7.72l3.56 5.53h2.04l3.55-5.48v7.91h3.72V.34h-2.77L69.4 8.65zm45.13-5h4.94v12.03h3.72V3.65h4.9V.35h-13.56v3.3zm24.33 3.04l-2.17-.5c-1.09-.24-1.82-.59-1.82-1.52 0-.5.22-.92.64-1.2.4-.27.96-.41 1.63-.41 1.45 0 2.31.65 2.56 1.95h3.74C143.31 3.8 142.45 0 136.9 0c-1.78 0-3.3.47-4.4 1.35A4.52 4.52 0 0 0 130.82 5c0 2.4 1.41 3.83 4.43 4.48l2.55.57c1.14.22 1.7.67 1.7 1.38 0 .91-.83 1.43-2.26 1.43-1.82 0-3.02-.8-3.3-2.18h-3.72a5.4 5.4 0 0 0 2.29 4.04 8 8 0 0 0 4.62 1.29c3.86 0 6.35-1.95 6.35-4.96 0-2.35-1.38-3.65-4.61-4.35zm-56.98 9h11.57v-3.22H85.6V9.65h6.84V6.51H85.6V3.56h7.85V.34H81.88v15.34zm25.72-6.53L100.05.34H97.2v15.34h3.71v-8.6l7.51 8.6h2.89V.34h-3.72v8.82z"
/>
</symbol>
<symbol id="portrait" viewBox="0 0 160 180">
<use xlink:href="#ix" x="40" y="32" width="80" height="80"/>
<use xlink:href="#typography" x="3" y="130" width="154" height="16"/>
</symbol>
<use xlink:href="#ix" x="5%" y="5%" width="90%" height="90%"/>
<use xlink:href="#portrait" x="5%" y="5%" width="90%" height="90%"/>
</svg>
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’t want to display, we need to add some classes to the use tags.
html<use class="square" xlink:href=”#ix” x=”5%” y=”5%” width=”90%” height=”90%”/>
<use class="portrait" xlink:href=”#portrait” x=”5%” y=”5%” width=”90%” height=”90%”/>Now, the only thing missing is some CSS to show only one logo version at a time. You can add a <style> tag to your SVG and use some media queries just like you would in a regular CSS file.
In CSS you most likely use something like @media (min-width: 768px) { ... }, 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: @media (min-aspect-ratio: 1/2) { ... }.
For our first two versions, let’s 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.
html<style>
.square { visibility: hidden; }
.portrait { visibility: visible; }
@media (min-aspect-ratio: 1/1) {
.square { visibility: visible; }
.portrait { visibility: hidden; }
}
</style>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’s height. Let’s see how the style changes:
css<style>
.square,
.landscape { visibility: hidden; }
.portrait { visibility: visible; }
@media (min-aspect-ratio: 1/1) {
.portrait,
.landscape { visibility: hidden; }
.square { visibility: visible; }
}
@media (min-aspect-ratio: 2/1) {
.portrait,
.square { visibility: hidden; }
.landscape { visibility: visible; }
}
</style>And that’s it. We’re done building our own responsive svg logo. Here, you can see the full code with three versions going from portrait mode to landscape:
html<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.square,
.landscape { visibility: hidden; }
.portrait { visibility: visible; }
@media (min-aspect-ratio: 1/1) {
.portrait,
.landscape { visibility: hidden; }
.square { visibility: visible; }
}
@media (min-aspect-ratio: 2/1) {
.portrait,
.square { visibility: hidden; }
.landscape { visibility: visible; }
}
</style>
<symbol id="ix" viewBox="0 0 160 160">
<rect id="Rectangle" width="160" height="160" fill="#000" fill-rule="nonzero" />
<path id="X" fill="#FFF" fill-rule="nonzero" d="M121.660503,96.7351709 C121.734151,96.9832696 121.863036,97.1972433 122.05176,97.3853926 C120.099155,96.2334395 118.385907,94.7725157 116.523521,93.5034304 C116.668056,94.1610306 120.641392,96.3275141 120.399273,96.7729852 C120.343116,96.8910396 115.252164,93.1160643 115.178516,93.1787807 C114.862748,93.4065889 116.0356,94.6157247 115.787036,94.5594643 C115.833067,94.598201 116.741705,95.2687133 116.637676,95.378467 C116.428699,95.4559403 122.086744,99.7022111 121.589616,100.302629 C121.388004,100.53966 119.845988,99.127618 119.637011,99.0270872 C119.785228,99.2678076 119.957382,99.4863928 120.159915,99.6856097 C118.955762,98.9699046 117.983602,97.9802763 116.843892,97.1852534 C116.994871,97.4674773 117.20569,97.7063531 117.472666,97.9009585 C116.522601,97.9074146 114.507394,95.5075891 113.687134,95.0233814 C113.42292,94.8795026 112.16261,93.6519208 111.973886,93.7284717 C111.955474,93.8031781 111.975727,93.870506 112.033725,93.9267663 C111.556852,93.7026473 111.143499,93.4065889 110.793669,93.032135 C110.815764,93.2341187 109.474441,91.3148117 108.938648,91.5527652 C109.267304,91.8718811 109.593199,92.1919193 109.916332,92.5128799 C108.83554,92.7480665 107.967409,90.0374257 106.509169,90.6479886 C106.627006,90.5991066 112.52717,96.2020813 112.684594,96.5885251 C112.666182,96.5424101 112.335684,96.4732376 112.321875,96.4308117 C112.682753,97.6288799 114.346288,98.7485525 115.166548,99.6219709 C113.25537,98.3003145 111.408634,96.4962951 109.514947,95.4651633 C108.772018,95.0611957 108.536343,94.2855411 107.823794,94.6876641 C107.670053,94.7715934 106.069119,93.6657553 105.881315,93.4785283 C105.847253,93.7736644 105.896966,94.0531214 106.026771,94.3196662 C104.529866,93.1354326 103.110291,91.3913626 101.357457,90.5474578 C101.759762,91.1229732 102.143655,91.5988802 102.253207,91.8488236 C102.378409,92.1292029 102.573578,92.3191968 102.635258,92.6364681 C100.112798,90.6138635 97.6105905,88.5257755 95.2087294,86.3574474 C94.6876663,85.8898411 92.0252737,83.4346776 91.6054773,84.1863523 C90.7511549,83.4106977 85.0369532,78.510516 83.8604186,78.2753294 C84.8086429,79.0583624 85.6399501,79.953916 86.5642386,80.7544727 C86.3423725,80.9269429 83.9165756,78.8139528 83.5731895,78.5243505 C82.9766368,78.0272306 81.0737441,76.3541778 80.225866,75.5785232 C79.5400145,74.9532036 78.8817811,74.33434 78.2171036,73.7210103 C76.9816502,74.6949595 74.8927951,76.4565531 74.5972806,76.692662 C74.2428473,76.9831866 73.8304158,77.159346 73.476903,77.5328776 C72.5286788,78.5391073 71.4267134,79.4116034 70.3137007,80.2481299 C68.906094,81.3060084 67.655911,82.554803 66.2289716,83.6385059 C66.2446219,83.4494344 66.4701704,83.4106977 66.3679831,83.1561429 C65.9978995,83.4494344 65.6314983,83.7159792 65.2899535,84.0175714 C63.3796959,85.6721782 61.470359,87.3258627 59.5729899,88.9924594 C58.149733,90.2430987 56.7725063,91.5481537 55.3188694,92.7665125 C53.7206973,94.0983142 52.1943324,95.5131229 50.6090488,96.8550699 C49.0007501,98.2209967 52.8470421,95.7206405 51.3630252,97.2267569 C51.1135409,97.4748557 50.8180264,97.6879071 50.5114646,97.8576104 C50.1266513,98.0771179 49.8559931,98.4082237 49.5162895,98.6710793 C49.1268731,98.9671377 48.6601258,99.1792668 48.1998228,99.4448893 C48.2458531,98.9265565 48.2421707,98.9431579 47.7303137,98.7919006 C47.3326119,98.6738462 47.0269707,98.3473519 46.8014222,98.0568273 C46.4736865,97.6288799 45.5512392,95.8377726 45.2474392,94.5281061 C45.2244241,94.4423322 45.2179798,94.33719 45.2391538,94.2578721 C45.4904792,93.2682439 45.2216622,92.3256529 44.8930059,91.3913626 C44.4953041,90.2680008 44.537652,89.0957571 44.4437501,87.9419593 C44.3885138,87.2244097 44.9629719,86.7752494 45.3965774,86.3168661 C46.2978507,85.35214 47.1889974,84.3468326 48.2191555,83.5213738 C48.8911979,82.9799835 49.5356222,82.3648092 50.3577234,81.9903552 C50.97545,81.7053644 51.3455337,81.0865009 51.8251694,80.61705 C52.3867391,80.0645921 53.0265603,79.582229 53.5540676,79.0177812 C54.326456,78.1987785 55.4790548,77.7809764 56.2477609,76.9518284 C56.9170415,76.2287449 63.6807341,70.6017905 64.6050226,69.8187575 C66.1396728,68.5256925 67.5795007,67.2363166 69.1067861,65.9727651 C68.8904437,65.7864604 68.6759425,65.6020004 68.454997,65.4092396 C66.6634977,63.859775 64.6630207,62.0529886 62.7997141,60.5072132 C60.9529784,58.977117 59.1403051,57.3215878 57.2981724,55.7177075 C54.3945809,53.1915269 51.6290803,51.5184741 48.6490786,49.0503983 C47.1089046,47.7785462 43.7551368,45.4857075 43.4145126,43.4446568 C43.1788374,42.0270812 45.1461725,40.5735358 45.8007234,39.6014313 C45.7731053,39.6401679 48.7503452,34.9816288 49.6866016,35.3662281 C49.9646246,35.4833602 50.3319464,35.080315 50.9938622,35.3284138 C52.0829391,35.7360705 52.824027,36.6980298 53.6369221,37.4644614 C56.2560463,39.9399155 58.9920875,42.2890145 61.7051135,44.6473365 C67.3373813,49.543829 72.7100382,53.8445155 78.2051357,58.6192644 C78.5255066,58.3794663 78.8486393,58.135979 79.1680896,57.8906472 C80.295832,57.0310632 81.4815726,56.2378849 82.6212829,55.387524 C84.072158,54.3213448 85.5460483,53.2939022 87.0199386,52.2535474 C87.7186786,51.7545829 88.451481,51.2980443 89.1318089,50.7787892 C90.4363076,49.7744041 91.8172167,48.8770059 93.1769518,47.9574724 C95.006196,46.7225123 96.8492493,45.5096873 98.6959851,44.2876393 C99.7703323,43.5719343 100.871377,42.8774421 102.010167,42.238288 C102.50177,41.9625202 102.904996,41.5152045 103.474851,41.3372005 C103.703161,41.2615719 103.901092,41.117693 104.177273,40.9406114 C105.741383,39.944527 107.342317,39.0083922 108.967187,38.1091493 C110.938204,37.0125342 112.892651,35.8753379 114.92719,34.8866319 C115.466665,34.6246986 116.031918,34.2225757 116.782211,34.2068966 C116.375304,34.7178509 115.886462,35.0139094 115.433524,35.4169546 C115.873573,35.6447628 116.678183,34.9530375 116.767482,35.1218185 C116.891764,35.3523936 116.559425,35.7526719 116.661612,35.7028677 C116.954365,35.556222 117.215817,35.3145793 117.613519,35.2869103 C117.351146,35.7250029 116.955285,35.9334428 116.609138,36.2267343 C117.14493,36.1289705 117.549076,35.6641311 118.223881,35.61156 C117.553679,36.1879977 116.816274,36.4111944 116.185659,36.8160842 C115.71615,37.1296664 115.188642,37.3703867 114.685991,37.6387761 C114.667579,37.6443099 114.636279,37.6489214 114.636279,37.6609114 C114.541456,38.2041463 113.990934,38.3166669 113.677928,38.6782086 C114.19715,38.6551511 114.624311,38.4273429 115.039504,38.1607981 C115.205213,38.2871533 114.95757,38.3738495 115.023854,38.5297183 C116.726054,37.8960979 118.153914,36.6611378 119.935287,36.161251 C119.285339,36.5781307 118.637233,37.0125342 117.981761,37.4100457 C117.464381,37.7254724 116.994871,38.1100716 116.451714,38.3996739 C116.001538,38.6385497 115.502569,38.7934962 115.083693,39.1015445 C114.94192,39.2094536 114.632596,39.3155182 114.769767,39.5433264 C114.917064,39.8034151 115.188642,39.7360871 115.447333,39.5848299 C116.225245,39.1393588 117.012363,38.7215567 117.799481,38.2972986 C117.855638,38.2687073 117.938493,38.2926871 118.009379,38.2926871 C117.795799,38.9770339 117.116391,39.2223658 116.707642,39.8024928 C117.186358,39.7314756 117.461619,39.3920691 117.860241,39.2694032 C118.551616,39.0674194 119.204326,38.7722833 119.968429,38.7575265 C120.464636,38.7464589 120.955319,38.3987516 121.500317,38.2806972 C121.082362,38.5712218 120.647836,38.8516011 120.241849,39.1679501 C120.110202,39.2703255 119.785228,39.2629471 119.918716,39.6060428 C120.072457,40.0007873 120.320101,39.7748237 120.526316,39.6945836 C120.764753,39.6032759 120.998587,39.4750761 121.23058,39.3607109 C121.30699,39.321052 121.370512,39.3155182 121.406416,39.4086705 C121.435875,39.4861437 121.434034,39.5608501 121.332767,39.5829853 C120.842084,39.6761376 120.482127,40.018311 120.095473,40.2959234 C119.709739,40.5809142 119.346099,40.8981856 118.96681,41.2108454 C119.035855,41.4672449 119.325846,40.9941048 119.373717,41.3122984 C119.414224,41.5677756 119.158296,41.5779209 119.045982,41.6286474 C117.166104,42.4642516 115.639739,43.8624589 113.927412,44.9553848 C113.193689,45.4211465 111.183085,46.6431944 110.928078,46.7972186 C110.183307,47.243612 109.449584,47.7213635 108.723226,48.201882 C108.629324,48.2599869 108.398252,48.2719768 108.525296,48.5136195 C108.63853,48.7368162 108.756368,48.6611876 108.928521,48.5800252 C110.002869,48.0626147 111.060645,47.4870992 111.967442,46.7206677 C112.539138,46.2392269 113.227752,46.0695236 113.818781,45.6572554 C114.550662,45.1444564 117.213976,43.4898495 118.3141,42.8359386 C118.899605,42.4836199 118.874749,42.4421163 119.442763,42.6773029 C119.292704,42.9115672 118.995348,42.9420031 118.825957,43.1347639 C118.289244,43.7075124 117.694532,44.2000208 117.096138,44.6833062 C116.528124,45.1472233 115.92973,45.5696368 115.323051,45.9736044 C115.069884,46.141463 114.845256,46.310244 114.703483,46.6007686 C116.560345,45.714438 118.19258,44.4213729 120.023665,43.4769373 C119.437239,44.1354598 118.616979,44.4453527 117.917319,44.9397057 C116.828242,45.714438 115.561488,46.2134025 114.604058,47.1836624 C114.358256,47.4336058 113.979887,47.3570549 113.698181,47.5986976 C112.623834,48.5034742 111.283432,49.0042833 110.197116,49.8832355 C109.796653,50.2106522 109.346476,50.4698186 108.962584,50.8175258 C108.808842,50.9531039 108.665228,51.1015943 108.457171,51.1477093 C107.415045,51.3773621 106.828619,52.3254869 105.937472,52.7967823 C105.373141,53.0992969 104.889823,53.5659808 104.32457,53.8297587 C103.653449,54.1534861 103.056896,54.6008018 102.469549,55.006614 C101.507516,55.676204 100.592434,56.4195781 99.6294796,57.1030027 C99.1139402,57.4608552 98.469516,57.6324031 98.0727348,58.1747157 L98.0764172,58.1645704 C97.2699663,58.4938316 96.6623663,59.1200735 95.9507378,59.5922913 C94.7696003,60.3808581 93.62989,61.2210737 92.5288452,62.1175496 C92.3014555,62.3047766 92.0998427,62.517828 91.8669294,62.7013658 L91.8862621,62.6783083 C91.1009852,62.7244233 90.8671513,63.5166793 90.1739349,63.804437 C90.4804967,63.970451 89.3509131,64.4694155 89.271741,64.5256758 C88.7166155,64.9093528 88.0712707,64.8254235 87.631221,65.3225433 C87.4378937,65.5383616 87.0383507,65.7735482 86.6829968,65.9838327 C93.3205664,71.641223 100.033626,77.1667244 106.399616,82.9449361 C109.79297,86.0254192 113.40727,88.9103747 117.028013,91.7713504 C119.230103,93.5117311 125.102649,98.9883506 125.793103,99.4910043 C125.527969,99.7271132 122.106076,97.0967126 121.660503,96.7351709 Z M120.725167,110.589044 C120.084425,110.835299 115.648945,111.007769 118.786371,111.365621 C120.757388,111.586973 117.586821,111.744687 117.596948,112.45578 C118.245975,112.437334 119.226421,113.687974 119.482349,113.649237 C119.517332,113.836464 117.533426,114.365864 117.953222,114.425814 C119.638852,114.663767 116.527204,114.778133 116.732499,115.1821 C117.316163,116.334976 116.447111,115.942998 117.540791,116.471476 C118.127217,116.754622 117.954143,117.787599 117.56933,117.874295 C117.067599,117.986815 116.91662,118.256127 116.456317,118.298553 C116.392795,118.716355 116.013505,118.91096 115.510855,118.9829 C114.421778,119.389634 113.201054,119.851707 112.024519,119.971606 C111.264099,120.050924 111.298161,120.122863 110.542344,119.978984 C109.734052,120.084126 108.500439,120.151454 107.692147,120.073981 C107.024708,120.237228 97.037053,120.821967 96.2011427,120.709446 C95.5364651,120.852403 91.5382731,120.988903 90.7198543,120.871771 C89.8903882,121.029484 82.9582247,121.216711 82.2392314,121.133704 C81.3977975,121.28035 80.0997429,121.339377 79.2518648,121.226857 C78.412272,121.391026 77.1096145,121.421462 76.2589745,121.323698 C75.4341115,121.479567 57.1094481,121.040552 56.2164603,120.903129 C55.3520112,121.011038 51.0656694,120.867159 50.21595,120.720514 C49.503401,120.826578 48.4327361,120.753716 47.7174252,120.643963 C46.8879592,120.762939 45.5945077,120.696534 44.7871362,120.471493 C44.3222301,120.340526 44.0193507,120.410621 43.8195792,119.948548 C43.6557114,119.564871 43.6989798,119.331529 43.392418,119.169204 C43.0324611,118.977366 43.0112871,118.158363 43.2478829,117.850315 C42.8511017,117.007332 43.4025447,115.432043 43.0858562,114.266256 C42.8962114,113.571764 43.2681362,113.608656 43.6059986,112.977802 C43.2092174,113.002704 43.1236011,112.293455 43.1696314,112.162489 C43.4264805,111.427415 43.0499526,111.069563 43.5995544,110.446088 C43.9291314,110.072556 43.778152,109.76543 44.3682604,109.76543 C44.7954216,109.76543 45.310961,109.767275 45.7298368,109.835525 C46.6421574,109.763586 47.827898,109.808778 48.7328537,109.948968 C50.5869543,109.82169 58.9322481,110.127894 60.7338741,110.41473 C62.4572487,110.293908 64.517565,110.41473 66.2344953,110.621325 C68.0793898,110.52725 99.0181972,110.290219 100.697383,110.209979 C102.543198,110.121438 104.622847,109.841981 106.456694,110.022752 C107.775923,109.804167 109.467996,109.936056 110.767892,110.188766 C111.965601,110.147262 112.528091,109.711014 113.700022,109.772809 C113.774592,109.65291 115.569773,110.048576 115.761259,110.059644 C115.924207,109.778342 117.533426,110.022752 117.910874,110.044887 C118.325147,110.073478 121.106298,110.440554 120.725167,110.589044 Z"
/>
</symbol>
<symbol id="typography" viewBox="0 0 144 16">
<path fill="#000" d="M34.98 12.42h7.64v3.26H31.26V.34h3.72v12.08zm-19.04 3.26H27.5v-3.21h-7.85V9.65h6.85V6.51h-6.85V3.56h7.85V.34H15.94v15.34zm29.85 0h11.57v-3.21H49.5V9.65h6.85V6.51H49.5V3.56h7.85V.34H45.79v15.34zM10.66 1.65a5.37 5.37 0 0 1 1.7 3.95c0 1.14-.4 2.29-1.31 3.72l-4 6.36H2.86l2.91-4.57.02-.04h-.1C2.34 10.86 0 8.64 0 5.66 0 2.38 2.6 0 6.2 0c1.75 0 3.33.58 4.46 1.65zM8.92 5.53A2.65 2.65 0 0 0 6.2 2.95 2.66 2.66 0 0 0 3.5 5.53 2.65 2.65 0 0 0 6.2 8.11c1.5 0 2.72-1.15 2.72-2.58zM69.4 8.65L63.86.35h-2.74v15.33h3.7V7.72l3.56 5.53h2.04l3.55-5.48v7.91h3.72V.34h-2.77L69.4 8.65zm45.13-5h4.94v12.03h3.72V3.65h4.9V.35h-13.56v3.3zm24.33 3.04l-2.17-.5c-1.09-.24-1.82-.59-1.82-1.52 0-.5.22-.92.64-1.2.4-.27.96-.41 1.63-.41 1.45 0 2.31.65 2.56 1.95h3.74C143.31 3.8 142.45 0 136.9 0c-1.78 0-3.3.47-4.4 1.35A4.52 4.52 0 0 0 130.82 5c0 2.4 1.41 3.83 4.43 4.48l2.55.57c1.14.22 1.7.67 1.7 1.38 0 .91-.83 1.43-2.26 1.43-1.82 0-3.02-.8-3.3-2.18h-3.72a5.4 5.4 0 0 0 2.29 4.04 8 8 0 0 0 4.62 1.29c3.86 0 6.35-1.95 6.35-4.96 0-2.35-1.38-3.65-4.61-4.35zm-56.98 9h11.57v-3.22H85.6V9.65h6.84V6.51H85.6V3.56h7.85V.34H81.88v15.34zm25.72-6.53L100.05.34H97.2v15.34h3.71v-8.6l7.51 8.6h2.89V.34h-3.72v8.82z"
/>
</symbol>
<symbol id="portrait" viewBox="0 0 160 180">
<use xlink:href="#ix" x="40" y="32" width="80" height="80"/>
<use xlink:href="#typography" x="3" y="130" width="154" height="16"/>
</symbol>
<symbol id="landscape" viewBox="0 0 328 64">
<use xlink:href="#ix" x="0" y="0" width="64" height="64"/>
<use xlink:href="#typography" x="82" y="19" width="246" height="27"/>
</symbol>
<use class="square" xlink:href="#ix" x="5%" y="5%" width="90%" height="90%"/>
<use class="portrait" xlink:href="#portrait" x="5%" y="5%" width="90%" height="90%"/>
<use class="landscape" xlink:href="#landscape" x="5%" y="5%" width="90%" height="90%"/>
</svg>8. A little bit of transformation
OK, OK… 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’ll need below:
html<symbol id=”skyscraper” viewBox=”0 0 64 328">
<use xlink:href=”#ix” x=”0" y=”264" width=”64" height=”64"/>
<use xlink:href=”#typography” x=”-90" y=”109" width=”246" height=”27" transform=”rotate(-90 32 123)”/>
</symbol>Over to you: I hope this tutorial has been useful and I’d certainly love to see some of your results.
If you’ve enjoyed this piece and would like to see more, you might want to check out our Website or follow us on Twitter.
