Создание адаптивных изображений

В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных размеров экрана. Когда я впервые увидел это, я подумал, что это не более, чем просто ловкий трюк. В конце концов, это просто div для спрайта большого изображения в качестве фона. Так было до того момента, пока я не услышал доклад на Smashing Conference от MikeRiethmuller под названием «За пределами медиазапросов». Кроме того, я настоятельно рекомендую прочитать его же статью «Большой потенциал SVG».



Я узнал две вещи, которые меня потрясли:

1. При использовании SVG вы можете отказаться от атрибута viewBox и установить новую систему координат на вложенных элементах SVG путем применения нового viewBox. (Да, я знаю. Это звучит странно. Ниже я объясню все более подробно).
2. Когда вы используете медиазапросы внутри SVG-файлов, а затем вставляете изображение через тег img или в качестве фонового изображения CSS, медиазапросы привязаны к ширине изображения. Практически такое же поведение, как и при использовании контейнерных запросов.

Рождение идеи

После того, как я прочитал обо всем этом, у меня возникла идея создать логотип для нашей компании, который бы не только реагировал на ширину браузера, но и мог бы пропорционально изменяться. Тем самым его можно было бы использовать повсеместно, и сам файл выбирал бы какую версию показывать в зависимости от заданных размеров.

Итоговый результат

Если вы заинтересовались, то загрузите последнее демо или посмотрите его на CodePen.

Шаг за шагом

Далее я собираюсь показать вам каждый шаг, который необходимо выполнить, чтобы создать свой собственный адаптивный логотип. Вы должны обладать базовыми знаниями о SVG, а также CSS. Но есть и хорошая новость: JavaScript вообще не понадобится. По большому счету, нам просто нужно будет скопировать код из одного файла в другой.

1. Разработка логотипа

Начнем с разработки четырех версий нашего логотипа. Я выбрал для этого Sketch.


^{Варианты логотипа: вертикальный — портрет — квадрат — горизонтальный}

Всякий раз, когда есть элементы, которые можно найти в нескольких версиях, я рекомендую использовать символы в редакторе Sketch. Это облегчит работу в дальнейшем, т.к. в графике SVG будут использоваться те же самые символы (Если вы еще не знакомы с символами в редакторе Sketch, то я настоятельно рекомендую статью от Джона Мура).

Как видите, логотип состоит из визуального элемента и названия компании. Только в квадратной версии я решил не использовать название компании. Это было сделано по той причине, что я хотел сделать логотип различимым, даже когда он будет использоваться как крошечная миниатюра размерами 32px на 32px.

2. Настройка SVG-файла

Прежде чем экспортировать изображения, мы должны создать новый SVG-файл. Может быть вас несколько испугает необходимость создать SVG-файл с написания кода, но, в конце концов, ничего сложного тут нет. Обещаю. Нам нужно только открыть и закрыть тег:

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

</svg>

Если вы посмотрите на атрибуты, то заметите, что атрибут viewBox отсутствует. Мы только устанавливаем 100% ширину и высоту.

(Примечание. Есть также два атрибута xmlns. Если честно, я точно не знаю, почему их необходимо использовать, надо бы загуглить… в любом случае, если их удалить, то нельзя будет использовать какие-либо символы в SVG, и вместо них вы будете получать сообщения об ошибках).

3. Экспорт SVG-символов

Поскольку мы будем использовать оба элемента в качестве символов в финальном SVG, мы должны поместить каждый из них в свою область и экспортировать как SVG.


^{Поместим все символы в отдельные области перед экспортом в SVG}

Крайне важно, чтобы вы не экспортировали объекты, а всегда создавали новую область редактирования. Если вы экспортируете элементы из более крупной области редактирования, то получите странные параметры преобразования, прикрепленные к вашим группам. Это также помогает отделить все символы и удалить все неиспользуемые группы. Наконец, подберите подходящее наименование.

Смотрите, как выглядит экспортированный код

<?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>

Я бы рекомендовал использовать что-то вроде SVGOMG, чтобы уменьшить размер файла и удалить все ненужные вещи. Но не удаляйте ID. Если вы как-то обозначили слои в Sketch, то сможете их идентифицировать по ID в конечном файле.

Вот как будет выглядеть ваш оптимизированный файл

<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>

Если все правильно, то вы увидите группу, которая имеет имя области редактирования в качестве ID. Нас интересует контент внутри этой группы. В данном примере это прямоугольник, который служит фоном и образованная сложным путем цифра IX (римская цифра 9 вращается против часовой стрелки на 90 градусов… поясняю на всякий случай).

4. Построение символов

Все наши файлы готовы и могут быть собраны вместе. Начнем с написания тэгов некоторых символов в конечном файле и укажем для каждого символа уникальный ID, так же, как и атрибут viewBox, который соответствует viewBox экспортируемых файлов.

<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>

Наконец, вставим содержимое экспортируемых файлов (внутри группы, названной как область редактирования) внутрь тегов символов.

Когда это будет сделано, файл должен выглядеть следующим образом

<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. Использование символов

Все идет по плану. К сожалению, если вы откроете файл в браузере, вы ничего не увидите. На данный момент мы определили символы, но еще нигде их не разместили. Чтобы вставить символ, нужно использовать в файле тег use:

<use xlink:href=”#ix” x=”0" y=”0" width=”100" height=”100”/>

Давайте посмотрим, что именно происходит.

Во-первых, xlink: href указывает на символ с уникальным ID и будет отображать его содержимое… точнее, не реально отображать, а клонировать, и внезапно появляется странная вещь под названием Shadow DOM. Это звучит несколько странно, но не стоит бояться. До тех пор, пока вы не захотите что-нибудь поменять внутри символов через CSS, вам не о чем беспокоиться.

Также у нас есть атрибуты x, y, width и height. Думаю, вы уже догадались, что эти атрибуты определяют положение и размеры отображаемого символа. Но не указана единица измерения, насколько большой будет наш символ? Внутри SVG единицы измерения определяются атрибутом viewBox, установленным в теге SVG. Поскольку мы не установили viewBox, а только определили ширину и высоту (100%), то единица измерения соответствует одному пикселю и наш символ будет в ширину 100 пикселей. И неважно, измените ли вы ширину в SVG. Символ всегда будет иметь ширину 100 пикселей.

Попробуйте изменить атрибуты width и height в CodePen. Вы заметите, что символ всегда будет соответствовать коэффициенту пропорциональности. К счастью, именно это нужно для нашего логотипа. Если вы хотите изменить поведение при изменении размера, вам нужен атрибут под названием preserveAspectRatio. Познакомьтесь со статьей SaraSoueidan о Системе координат и ее трансформации в SVG, если хотите узнать больше.

Помимо безразмерных значений, вы также можете использовать процентные для определения позиции и размеров объекта. Чтобы символ выглядел как квадрат, просто используйте ширину 90% и расположите его верхний левый угол в 5% от ограничивающей изображение рамки:

<use xlink:href=”#ix” x=”5%" y=”5%" width=”90%" height=”90%”/>

(Может быть, вы думаете, что автонастройка ширины или высоты — хорошая идея… но это не так. Safari и Firefox просто игнорируют ее, а Chrome ничего не отрисует)

6. Объединение символов внутри нового символа

Для портретной версии нам нужны оба символа. Чтобы убедиться, что они масштабируются пропорционально и всегда расположены на одинаковом расстоянии от границ и по отношению друг к другу, мы просто создаем еще один символ. Этот символ имеет свой собственный атрибут viewBox, который позволяет разместить наши символы в новой системе координат. Чтобы понять, где именно символы должны быть размещены, можете просто вернуться в свой файл и проверить размеры и расстояния.




^{Портретная версия: Purple: viewBox — Red: Position — Turquoise: Width and Height}

Теперь нам нужно перевести все числа в новый символ SVG, который будет выглядеть следующим образом:

<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>

Когда мы используем этот символ, мы не хотим, чтобы его ширина была 100%, поэтому просто масштабируем его как квадрат.

<use xlink:href=”#portrait” x=”5%" y=”5%" width=”90%" height=”90%”/>

7. Скрыть и показать

Мы создали три символа и использовали два тега use в SVG

<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>

Наконец, начинается интересная часть, когда мы можем сделать изображение отзывчивым. Сейчас оба символа визуализируются поверх друг друга. Чтобы скрыть части, которые мы не хотим отображать, необходимо добавить некоторые классы в тег use.

<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%”/>

Единственное, чего теперь не хватает — это CSS, чтобы показывать только одну версию логотипа в каждый момент времени. Вы можете добавить тег style в SVG и использовать медиа-запросы точно так же, как и в обычном файле CSS.

В CSS вы, скорее всего, используете что-то вроде @media (min-width: 768px) {...}, но тогда вы рассматриваете только ширину изображения. Мы же заинтересованы в пропорциональности, а не в ширине, поэтому наши медиа-запросы должны выглядеть следующим образом: @media (min-aspect ratio: 1/2) {...}.

Для наших первых двух версий по умолчанию сделаем портретную версию и покажем IX-версию только тогда, когда ширина изображения будет такой же, как и высота. Другими словами, в момент, когда изображение меняется с портретного формата на горизонтальное, мы не будем показывать типографию, а только графический логотип.

<style>

  .square { visibility: hidden; }
  .portrait { visibility: visible; }

  @media (min-aspect-ratio: 1/1) {
    .square { visibility: visible; }
    .portrait { visibility: hidden; }
  }

</style>

Если вы создадите еще один символ для горизонтальной версии, то, вероятно, захотите продемонстрировать его при условии, что ширина изображения будет как минимум в два раза больше высоты. Посмотрим, как изменится стиль:

<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>

Вот и все. Мы закончили создание собственного адаптивного логотипа в формате SVG.

Вот полный код с тремя версиями, начиная с портретного и заканчивая горизонтальным

<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. Немного о трансформации

Да, я знаю, что вертикальная версия отсутствует в приведенном выше примере. Причина в том, что потребуется выполнить некоторое преобразование, чтобы создать необходимый символ. Я не буду вдаваться в детали, просто дам вам необходимый код:

<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>

Я надеюсь, что все это было полезно и я, конечно, был бы рад увидеть ваши результаты.

Заглядывайте на VPS.today — сайт для поиска виртуальных серверов. 1500 тарифов от 130 хостеров, удобный интерфейс и большое число критериев для поиска самого лучшего виртуального сервера.