Reaktionsschnelle Bilder erstellen

Published on November 09, 2018

Reaktionsschnelle Bilder erstellen

Ursprünglicher Autor: Nils Binder
  • Übersetzung
Im Internet gibt es viele Artikel zu Responsive-Logos. Das beliebteste Beispiel ist die Responsive Logos- Website , auf der verschiedene Variationen bekannter Logos für verschiedene Bildschirmgrößen angezeigt werden. Als ich es zum ersten Mal sah, dachte ich, es sei nichts weiter als ein cleverer Trick. Am Ende ist es nur divfür ein großes Bild-Sprite als Hintergrund. Bis ich auf der Smashing Conference einen Bericht von Mike Riethmüller mit dem Titel „ Beyond Media Queries “ hörte . Darüber hinaus empfehle ich nachdrücklich, seinen eigenen Artikel „Das große Potenzial von SVG “ zu lesen . Ich erkannte zwei Dinge, die mich erschütterten:





  1. Bei Verwendung von SVG können Sie das Attribut löschen viewBoxund ein neues Koordinatensystem für die verschachtelten SVG-Elemente festlegen, indem Sie ein neues anwenden viewBox. (Ja, ich weiß. Es klingt seltsam. Im Folgenden werde ich genauer erklären).
  2. Wenn Sie Medienabfragen in SVG-Dateien verwenden und dann ein Bild über ein img-Tag oder als CSS-Hintergrundbild einfügen, sind Medienabfragen an die Breite des Bildes gebunden. Praktisch das gleiche Verhalten wie bei der Verwendung von Containerabfragen .

Die Geburt einer Idee


Nachdem ich darüber gelesen hatte, hatte ich die Idee, ein Logo für unser Unternehmen zu erstellen, das nicht nur auf die Breite des Browsers reagiert, sondern sich auch proportional ändern könnte. Somit könnte es überall verwendet werden, und die Datei selbst würde in Abhängigkeit von den angegebenen Größen die anzuzeigende Version auswählen.

Endgültiges Ergebnis


Wenn Sie interessiert sind, laden Sie die neueste Demo herunter oder schauen Sie sie sich auf CodePen an .



Schritt für Schritt


Als Nächstes zeige ich Ihnen alle Schritte, die Sie zum Erstellen Ihres eigenen reaktionsfähigen Logos ausführen müssen. Sie sollten über Grundkenntnisse in SVG und CSS verfügen. Es gibt aber auch einige gute Neuigkeiten: JavaScript wird überhaupt nicht benötigt. Im Großen und Ganzen müssen wir nur den Code von einer Datei in eine andere kopieren.

1. Logo Design


Beginnen wir mit der Entwicklung von vier Versionen unseres Logos. Dafür habe ich Sketch gewählt .


Logooptionen: vertikal - hochformat - quadratisch - horizontal

Immer wenn Elemente in mehreren Versionen vorhanden sind, empfehle ich die Verwendung von Symbolen im Skizzeneditor. Dies wird die Arbeit in Zukunft erleichtern, weil SVG-Grafiken verwenden dieselben Zeichen (Wenn Sie mit den Zeichen im Sketch Editor nicht vertraut sind, empfehle ich einen Artikel von John Moore ).

Wie Sie sehen, besteht das Logo aus einem visuellen Element und einem Firmennamen. Nur in der quadratischen Version habe ich beschlossen, den Firmennamen nicht zu verwenden. Dies geschah, weil ich das Logo sichtbar machen wollte, auch wenn es als winzige Miniatur 32 x 32 Pixel verwendet werden sollte.

2. Konfigurieren Sie die SVG-Datei


Vor dem Exportieren von Bildern müssen wir eine neue SVG-Datei erstellen. Vielleicht haben Sie etwas Angst davor, eine SVG-Datei mit Code zu erstellen, aber am Ende gibt es hier nichts Kompliziertes. Ich verspreche es. Wir müssen nur das Tag öffnen und schließen:

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

Wenn Sie sich die Attribute ansehen, werden Sie feststellen, dass das Attribut viewBoxfehlt. Wir setzen nur 100% Breite und Höhe.

( Hinweis: Es gibt auch zwei xmlns-Attribute. Um ehrlich zu sein, weiß ich nicht genau, warum sie verwendet werden sollten. Wir sollten sie googeln. Wenn Sie sie löschen, können Sie keine Zeichen in der SVG verwenden Fehlermeldungen erhalten ).

3. Exportieren Sie SVG-Symbole


Da wir beide Elemente als Symbole in der endgültigen SVG verwenden, müssen wir jedes in eine eigene Domäne stellen und als SVG exportieren.


Platzieren Sie alle Zeichen in separaten Bereichen, bevor

Sie sie in SVG exportieren. Es ist äußerst wichtig, dass Sie keine Objekte exportieren, sondern immer einen neuen Bearbeitungsbereich erstellen. Wenn Sie Elemente aus einem größeren Bearbeitungsbereich exportieren, werden Ihren Gruppen seltsame Konvertierungsoptionen zugewiesen. Es hilft auch, alle Zeichen zu trennen und alle nicht verwendeten Gruppen zu entfernen. Wählen Sie zum Schluss einen passenden Namen.

Sehen Sie, wie der exportierte Code aussieht.
<?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>


Ich würde empfehlen, SVGOMG zu verwenden, um die Dateigröße zu reduzieren und alle unnötigen Dinge zu entfernen. Löschen Sie die ID jedoch nicht. Wenn Sie die Layer in Sketch irgendwie identifiziert haben, können Sie sie anhand der ID in der endgültigen Datei identifizieren.

So sieht Ihre optimierte Datei aus.
<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>


Wenn alles korrekt ist, wird eine Gruppe mit dem Namen des Bearbeitungsbereichs als ID angezeigt. Wir interessieren uns für Inhalte innerhalb dieser Gruppe. In diesem Beispiel ist dies ein Rechteck, das als Hintergrund dient, und die Ziffer IX wird durch einen komplexen Pfad gebildet (die römische Ziffer 9 dreht sich um 90 Grad gegen den Uhrzeigersinn ... Ich erkläre nur für den Fall).

4. Charaktere bauen


Alle unsere Dateien sind fertig und können zusammen gesammelt werden. Wir beginnen damit, die Tags einiger Zeichen in die endgültige Datei zu schreiben und geben für jedes Zeichen eine eindeutige ID sowie das viewBox-Attribut an, das der viewBox der exportierten Dateien entspricht.

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

Fügen Sie abschließend den Inhalt der exportierten Dateien (innerhalb der Gruppe, die als Bearbeitungsbereich bezeichnet wird) in die Zeichen-Tags ein.

Wenn dies erledigt ist, sollte die Datei so aussehen.
<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. Zeichen verwenden


Alles läuft nach Plan. Wenn Sie die Datei in einem Browser öffnen, sehen Sie leider nichts. Im Moment haben wir Symbole definiert, aber sie wurden nirgendwo anders platziert. Um ein Zeichen einzufügen, müssen Sie das Tag in der Datei verwenden use:

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

Mal sehen, was passiert.

Erstens zeigt es xlink: hrefauf ein Symbol mit einer eindeutigen ID und zeigt seinen Inhalt an ... genauer gesagt, nicht wirklich angezeigt, sondern geklont, und plötzlich erscheint eine seltsame Sache namens Shadow DOM . Das klingt ein bisschen seltsam, aber hab keine Angst. Solange Sie mit CSS nichts an den Zeichen ändern möchten, brauchen Sie sich keine Sorgen zu machen.

Wir haben auch die Attribute x , y , width und height . Ich denke, Sie haben bereits vermutet, dass diese Attribute die Position und Größe des angezeigten Symbols bestimmen. Aber die Einheit ist nicht spezifiziert, wie groß wird unser Symbol sein? In SVG werden Maßeinheiten durch das Attribut definiertviewBoxim SVG-Tag gesetzt. Da wir nicht festgelegt viewBox, sondern nur die Breite und Höhe (100%) bestimmt haben, entspricht die Maßeinheit einem Pixel und unser Symbol ist 100 Pixel breit. Es spielt keine Rolle, ob Sie die Breite in der SVG ändern. Das Zeichen ist immer 100 Pixel breit.

Versuchen Sie, die Attribute width und height in CodePen zu ändern . Sie werden feststellen, dass das Symbol immer dem Proportionalitätskoeffizienten entspricht. Glücklicherweise wird dies für unser Logo benötigt. Wenn Sie das Verhalten bei der Größenänderung ändern möchten, benötigen Sie ein Attribut namens preserveAspectRatio. Lesen Sie den Artikel von SaraSoueidan über das Koordinatensystem und seine Transformation in SVG, wenn Sie mehr erfahren möchten.

Neben dimensionslosen Werten können Sie auch Prozentwerte verwenden, um die Position und Größe eines Objekts zu bestimmen. Verwenden Sie einfach eine Breite von 90% und positionieren Sie die linke obere Ecke 5% des Begrenzungsrahmens, damit das Symbol wie ein Quadrat aussieht:

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

( Vielleicht finden Sie, dass die automatische Anpassung der Breite oder Höhe eine gute Idee ist. Dies ist jedoch nicht der Fall. Safari und Firefox ignorieren sie einfach und Chrome zeichnet nichts. )

6. Zeichen in einem neuen Zeichen kombinieren


Für die Porträtversion benötigen wir beide Symbole. Um sicherzustellen, dass sie proportional skaliert werden und sich immer im gleichen Abstand von den Rändern und relativ zueinander befinden, erstellen wir einfach ein anderes Symbol. Dieses Symbol verfügt über ein eigenes viewBox-Attribut, mit dem Sie unsere Zeichen im neuen Koordinatensystem platzieren können. Um genau zu verstehen, wo die Zeichen platziert werden sollen, können Sie einfach zu Ihrer Datei zurückkehren und die Abmessungen und Abstände überprüfen.




Hochformat: Lila: viewBox - Rot: Position - Türkis: Breite und Höhe

Nun müssen wir alle Zahlen in ein neues SVG-Zeichen umwandeln, das so aussieht:

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

Wenn wir dieses Symbol verwenden, möchten wir nicht, dass seine Breite 100% beträgt, also skalieren wir es einfach als Quadrat.

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

7. Ein- und Ausblenden


Wir haben drei Zeichen erstellt und zwei Verwendungstags in SVG verwendet
<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>


Schließlich beginnt der interessante Teil, wenn wir das Bild reaktionsfähig machen können. Jetzt werden beide Zeichen übereinander gerendert. Um Teile auszublenden, die nicht angezeigt werden sollen, müssen Sie dem Tag einige Klassen hinzufügen 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%”/>


Jetzt fehlt nur noch CSS, um jeweils nur eine Version des Logos anzuzeigen. Sie können stylein SVG ein Tag hinzufügen und Medienabfragen wie in einer normalen CSS-Datei verwenden.

In CSS verwenden Sie höchstwahrscheinlich so etwas @media (min-width: 768px) {...}, aber dann berücksichtigen Sie nur die Breite des Bildes. Wir sind im Verhältnis interessieren, anstatt in der Breite, so dass unsere Medien - Anfragen sollen wie folgt lauten: @media (min-aspect ratio: 1/2) {...}.

Für unsere ersten beiden Versionen erstellen wir standardmäßig eine Porträtversion und zeigen die IX-Version nur an, wenn die Bildbreite der Höhe entspricht. Mit anderen Worten, in dem Moment, in dem das Bild von einem Hochformat in ein horizontales Format wechselt, wird nicht die Typografie, sondern nur das Grafiklogo angezeigt.

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

Wenn Sie ein anderes Symbol für die horizontale Version erstellen, möchten Sie es wahrscheinlich demonstrieren, vorausgesetzt, das Bild ist mindestens doppelt so hoch wie das Bild. Mal sehen, wie sich der Stil ändert:

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

Das ist alles. Wir haben die Erstellung unseres eigenen Responsive-Logos im SVG-Format abgeschlossen.

Hier ist der vollständige Code mit drei Versionen, beginnend mit dem Porträt und endend mit der Horizontalen
<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. Ein bisschen Transformation


Ja, ich weiß, dass die vertikale Version im obigen Beispiel fehlt. Der Grund dafür ist, dass Sie einige Konvertierungen durchführen müssen, um den erforderlichen Charakter zu erstellen. Ich werde nicht auf Details eingehen, sondern Ihnen nur den notwendigen Code geben:

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

Ich hoffe, dass all dies nützlich war und würde mich natürlich über Ihre Ergebnisse freuen.


Gehen Sie zu VPS.today - einer Site für die Suche nach virtuellen Servern. 1500 Tarife von 130 Hostern, komfortable Benutzeroberfläche und eine Vielzahl von Kriterien, um den besten virtuellen Server zu finden.