آموزش ساختن تصاویر رسپانسیو

سه شنبه ۰۶ شهریور ۹۷ توسط محمدسینا مرادی

مقالات بسیار کمی در وب برای ساختن لوگو های رسپانسیو یا واکنشگرا وجود دارند. مثال های بسیار محبوبی در وبسایت لوگو های رسپانسیو وجود دارند که لوگو های شناخته شده ای را هنگام عوض شدن اندازه پنجره مرورگر تغییر می دهند و به نظر من بسیار جذاب می باشند. وقتی که من برای اولین بار آن را دیدم فکر کردم که یک حیله و تقلب بیشتر نیست. در نهایت، این فقط یک <div> با یک عکس پس زمینه بزرگ است. تا زمانی که من یک سخنرانی در کنفرانس Smashing که توسط @MikeRiethmuller و تحت عنوان: فراتر از Query های رسانه ای، بود شنیدم و به این موضوع علاقه بیشتری پیدا کردم. به علاوه این سخنرانی، من به شدت توصیه می کنم مقاله او را نیز با عنوان "SVG has more potential" بخوانید.

اینجا 2 چیز وجود دارد که من آنها را آموختم و بیشتر هیجان زده شدم.

  1. هنگام استفاده از SVG، شما می توانید ویژگی viewBox را رها و با یک سیستم مختصات جدید در المنت های تودرتو SVG-symbol با اعمال کردن یک viewBox جدید ایجاد کنید. (بله می دانم، کمی گیج کننده به نظر می رسد. در زیر، من توضیحات بیشتری خواهم داد.)
  2. وقتی از پرونده های رسانه ای درون فایل های SVG استفاده می کنید و سپس تصویر را از طریق img-tag یا به عنوان تصویر پس زمینه CSS وارد می کنید، Query های رسانه ای به عرض تصویر محدود می شوند. خیلی مشابه رفتاری که شما از Container Queries استفاده می کنید.

ایده متولد شد

بعد از اینکه همه اینها را خواندم، من یک ایده به ذهنم رسید تا یک فایل لوگو برای شرکت مان بسازم، که نه تنها به عرض مرورگر واکنش نشان می دهد، بلکه به جای آن با توجه به نسبت ابعاد آن نیز هماهنگ شده باشد و بسته به اندازه ای که دارد فایل خودش انتخاب کند که کدام نسخه اش را نشان دهد.

نتیجه نهایی

اگر شما واقعا در این مورد هیجان زده شده اید، فایل دمو نهایی را دانلود یا این کار را در CodePen مشاهده نمایید.

همچنین این گیف کوچک یک ذهنیت کوچک را برای شما در مورد کار مان ایجاد می کند.

مرحله به مرحله 

در زیر: قصد دارم تا شما را از طریق هر گام که باید برای ساختن لوگوی رسپانسیو انجام دهید راهنمایی کنم. شما حداقل باید کمی دانش در مورد SVG و همچنین CSS داشته باشید. اما خبر خوبی برای تان دارم، هیچ چیزی به نام جاوا اسکریپت وجود ندارد تا شما را بترساند! :-} در اکثر موارد، ما فقط کد ها را کپی می کنیم پس شاد باشید.

مرحله اول: طراحی لوگو

اول از همه بیایید چهار تا نسخه مختلف از لوگو مان را طراحی کنیم. ابزاری که من از آن استفاده کرده ام Sketch می باشد.

هرگاه که المنت هایی وجود داشتند، که می توانند در نسخه متعددی پیدا شوند، من استفاده از نماد های Sketch را توصیه می کنم. این کار باعث می شود که در آینده کار شما آسان تر شود و SVG ای که در حال ساخت آن هستیم از همان نماد ها اسفاده خواهند کرد. (اگر شما با نماد های Sketch آشنا نیستید به شدت پیشنهاد می کنم این داستان Medium را که به دست Jon Moore نوشته شده است را مطالعه کنید.)

همانطور که می ببینید، لوگو از المنت ویژوال و نام شرکت مرکب است. فقط در نسخه مربعی، من نام را برای نمایش دادن انتخاب نکرده ام. دلیل این کار، این است که هر بار از لوگو های کوچک مانند 32 پیکسل در 32 پیکسل را استفاده کردیم قابل تشخیص باشند. 

مرحله دوم: راه اندازی فایل 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 استفاده کنید و کمی پیام های ارور زشت را دریافت خواهید کرد.)

مرحله سوم: صادر کردن نماد های SVG

چون ما از هر دوی آن المنت ها به عنوان نماد ها در SVG نهایی استفاده کرده ایم، ما باید هر یک از آنها را در یک artboard تکی قرار بدیم و آنها را به عنوان SVG صادر کنیم.

این مهم است که شما object ها را صادر نکنید ولی همیشه یک artboard جدید ایجاد کنید. اگر المنت ها را از یک artboard بزرگتر صادر کنید، به ویژگی های تبدیل عجیب و غریب متصل به گروه های خود پایان دهید. این همچنین کمک می کند تا همه نماد ها را شناسایی و گروه های به کار نگرفته را حذف کنید. در نهایت، بعضی از نام گذاری ها را مناسب انجام دهید و نگاه کنید ببینید آیا ماسک های اعمال شده ای وجود دارند که به کار نگرفته شده باشند.

حالا بیایید ببینیم کد صادر شده چگونه است:

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

اگر همه چیز درست باشد، شما گروهی را خواهید دید که اسم درون artboard تان را به عنوان ID دارد. درون این گروه محتوا قرار دارد، این بخش مورد علاقه است. در این مورد، یک مستطیل به عنوان پس زمینه و یک مسیر پیچیده ای است که IX را ایجاد می کند (رمان 9 نود درجه در خلاف عقربه های ساعت چرخانده شده ... فقط در صورتی که شما از آن درخواست کردید).

مرحله چهارم: ساختن نماد ها

تمام فایل های ما آماده هستند و می توان آنها را با هم ترکیب کرد. با نوشتن تگ های نماد در فایل نهایی تان شروع کنید و به هر یک، یک 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>

در نهایت، محتوای فایل های صادر شده تان را (هرچیزی که داخل گروه نام گذاری شده است مانند artboard تان) در تگ های نماد پیست (جای گذاری) کنید. هنگامی که کارتان تمام شد باید چیزی شبیه به این را به دست آورده باشید:

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

مرحله پنجم: استفاده از نماد های مان

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:

تاکنون که خیلی خوب بودید تبریک می گویم {-: متاسفانه، اگر شما فایل را در مرورگر باز کنید، نمی توانید هیچ چیزی را ببینید. در حال حاضر، ما نماد های مان را تعریف کردیم، اما هیچ وقت آنها را هیچ جا قرار ندادیم. برای قرار دادن یک نماد در فایل تان شما به تگ use نیاز پیدا خواهید کرد.

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

حالا بیایید ببینیم دقیقا چه اتفاقی اینجا افتاده است.

ابتدا xlink:href به یک نماد با ID منحصر به فرد اشاره می کند و محتویات آن را رندر می کند... خب، آن واقعا رندر نمی شود، اما شبیه آن را می سازد و ناگهان چیزی عجیب بالا می آید که با اسم Shadow DOM شناخته شده است. این ممکن است بعضی از چیز های بیگانه باشد، اما نیازی نیست تا شما بترسید. تا زمانی که شما نمی خواهید چیزی را در داخل نماد از طریق CSS تغییر دهید، چیزی برای نگرانی وجود ندارد.

بعد ما ویژگی های xywidth و height را داریم. ممکن است حدس زده باشید که اینها برای چه هستند، آنها ویژگی هایی هستند که موقعیت و ابعاد نماد رندر شده را تعریف می کنند. اما آنجا هیچ واحدی نیست، پس چقدر نماد بزرگ می شود؟ داخل SVG واحد ها با ویژگی viewBox تعریف می شوند که در تگ SVG تنظیم می شود. از آنجا که ما viewBox را تنظیم نکرده ایم و فقط عرض و ارتفاع را به 100 درصد تعریف کرده ایم، یک واحد با یک پیکسل برابر می شوند و نماد ما عرض 100 پیکسل را دارد و اگر نیز عرض SVG را تغییر دهید موضوع مهمی نیست آن همیشه در 100 پیکسل باقی می ماند.

سعی کنید در CodePen ویژگی های عرض و ارتفاع را تغییر دهید. متوجه خواهید شد نماد همیشه نسبت ابعادش را حفظ خواهد کرد. خوشبختانه این دقیقا همان چیزی است که برای لوگو می خواهیم. اگر می خواهید رفتار تغییر سایز را عوض کنید، به ویژگی ای نیاز دارید که با اسم preserveAspectRatio شناخته شده است. در صورت تمایل به کسب اطلاعات بیشتر در این مورد مقاله Understanding SVG Coordinate Systems and را مطالعه بکنید.

به غیر از مقادیر بدون واحد، شما همچنین می توانید از درصد برای تعریف موقعیت و ابعاد از طریق ویژگی ها استفاده کنید. بنابراین برای اینکه این نماد به شکل مربع ظاهر شود، به سادگی از عرض 90٪ استفاده کنید و گوشه سمت راست بالای آن را 5٪ از محدوده تصویر قرار دهید:

همانند کد زیر:

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

(شاید با خودتان بگویید که بهتر نبود عرض و ارتفاع را روی ‘auto’ تنظیم می کردیم... خب، خیر. سافاری و فایرفاکس به سادگی آن را نادیده می گیرند در حالیکه کروم اصلا هیچ چیزی را رندر نمی کند.)

مرحله ششم: ترکیب نمادها در یک نماد جدید

برای نسخه عمودی (portrait)، ما هر دوی نماد ها را نیاز داریم. به منظور اطمینان از اینکه مقیاس آنها متناسب است و همیشه از همان فاصله به مرز و به یکدیگر فاصله می گیرند، ما به سادگی یک نماد دیگر ایجاد می کنیم. این نماد دوباره خاصیت viewBox خود را دارد که اجازه می دهد ما نماد های مان را در سیستم مختصات جدید قرار دهیم. برای دیدن دقیق همان چیزی که باید قرار دهید، می توانید به فایل Sketch خود بازگردید و اندازه ها و فاصله ها را بررسی کنید.

راهنمای عکس بالا: نسخه-عمودی: بنفش: viewBox—  قرمز: موقعیت— فیروزه ای: عرض و ارتفاع

اکنون، ما فقط باید تمام اعداد را به نماد جدید 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%”/>

مرحله هفتم: مخفی کردن و نمایش دادن

تا به این نقطه ما سه نماد را ایجاد کردیم و دو تگ 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 تان اضافه کنید و از مقداری media queries فقط مانند چیزی که در یک فایل ساده CSS نیاز دارید استفاده کنید.

در CSS شما به احتمال زیاد از @media (min-width: 768px) { ... } استفاده می کنید، اما بعد شما فقط به عرض تصویر نگا می کنید. ما علاقه مند به نسبت ابعاد و عرض نیستیم، بنابراین media queries ما باید مانند این باشد: @media (min-aspect-ratio: 1/2) { ... }.

برای دو نسخه اول مان، بیایید portrait-version را پیش فرض کنیم و نسخه تک 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 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>

مرحله هشتم: کمی دگرگونی

باشه، باشه... من می دانم که نسخه skyscraper در مثال بالا مفقود شده است. دلیلش این است که شما نیاز به کمی تحول و دگرگونی برای نماد مورد نظر دارید. من آن را توضیح نمی دهم، ولی کدی که نیاز دارید را در زیر آورده ام:

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

امیدوارم که این مقاله برای تان مفید واقع شده باشد. دوست دارم نتایج شما را نیز ببینیم می توانید از طریق دیدگاه ها آن را بفرستید.


کلیدواژه: CSS SVG عکس رسپانسیو طراحی لوگو تصویر واکنشگرا

منابع: medium.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.