Como transformar esse XML em um SVG utilizável?

1

Trabalhando com um aplicativo legado, tenho XML para duas imagens SVG usadas no aplicativo. Eu preciso extrair essas imagens em arquivos .svg adequados.

<symbol id="icon-dizzy-somewhat" viewBox="0 0 1024 1024">
<title>dizzy-somewhat</title>
<path class="path1" d="M520.192 491.725c44.646 0 86.426-17.613 117.76-49.766 31.13-31.949 48.333-74.752 48.333-120.218 0-46.080-17.203-89.088-48.333-121.651-31.334-32.154-73.114-50.176-117.76-50.176-45.875 0-88.678 17.818-121.037 49.971-32.154 32.358-49.971 75.571-49.971 121.856 0 93.798 76.8 169.984 171.008 169.984z"></path>
<path class="path2" d="M625.254 532.685h-216.064c-126.566 0-217.088 104.243-217.088 215.245 0 106.086 0 108.134 0 108.134 1.024 119.808 125.542 139.264 327.27 139.264 197.632 0 321.331-19.456 321.331-139.264 0 0 0-15.565 0-108.134-0.205-113.050-88.678-215.245-215.45-215.245z"></path>
<path class="path3" d="M288.358 127.386l-29.286-28.467c-10.035 10.445-19.661 21.709-28.262 33.382l32.973 24.166c7.373-10.24 15.77-20.070 24.576-29.082z"></path>
<path class="path4" d="M247.603 181.043l-35.43-20.685c-15.155 26.010-26.624 54.067-33.792 83.558l39.731 9.83c6.349-25.395 16.179-49.971 29.491-72.704z"></path>
<path class="path5" d="M212.378 282.829l-40.55-5.734c-2.048 14.336-3.072 28.877-3.072 43.622l40.96 0.205c0-12.698 1.024-25.6 2.662-38.093z"></path>
<path class="path6" d="M249.856 320.717l40.96 0.205c0-12.493 1.229-24.986 3.482-37.069l-40.346-7.373c-2.662 14.541-3.891 29.491-4.096 44.237z"></path>
<path class="path7" d="M316.211 222.003l-35.84-19.661c-9.216 16.794-16.384 34.611-21.504 53.043l39.526 10.854c4.096-15.36 10.24-30.31 17.818-44.237z"></path>
<path class="path8" d="M348.979 177.766l-29.491-28.467c-10.445 10.65-19.866 22.323-28.058 34.611l33.997 22.733c6.963-10.24 14.95-20.070 23.552-28.877z"></path>
<path class="path9" d="M743.424 181.658c-8.192-12.493-17.613-24.166-28.058-34.816l-29.491 28.467c8.602 8.806 16.384 18.637 23.347 28.877l34.202-22.528z"></path>
<path class="path10" d="M718.848 220.16c7.782 14.336 13.926 29.696 18.227 45.67l39.526-10.65c-5.12-19.046-12.493-37.274-21.914-54.477l-35.84 19.456z"></path>
<path class="path11" d="M785.613 320.717c0-14.95-1.434-29.696-4.096-44.237l-40.346 7.168c2.253 12.288 3.277 24.781 3.482 37.274l40.96-0.205z"></path>
<path class="path12" d="M825.754 320.922l40.96-0.205c0-14.541-1.024-29.286-3.072-43.418l-40.55 5.53c1.638 12.493 2.662 25.395 2.662 38.093z"></path>
<path class="path13" d="M817.562 253.338l39.731-9.83c-7.373-29.901-18.842-58.368-33.997-84.992l-35.43 20.48c13.107 23.142 23.142 48.128 29.696 74.342z"></path>
<path class="path14" d="M804.454 129.638c-8.602-11.878-18.022-22.938-28.262-33.382l-29.491 28.467c8.806 9.011 16.998 18.842 24.576 29.082l33.178-24.166z"></path>
</symbol>
<symbol id="icon-dizzy-very" viewBox="0 0 1024 1024">
<title>dizzy-very</title>
<path class="path1" d="M399.974 171.418c23.347-11.878 48.333-23.552 74.138-34.611l-16.179-37.683c-26.624 11.469-52.224 23.552-76.39 35.84l18.432 36.454z"></path>
<path class="path2" d="M277.299 293.888c-9.421 0-17.408-0.614-23.757-2.048l-8.397 40.141c9.216 1.843 19.866 2.867 32.154 2.867 0 0 0 0 0 0 16.589 0 36.045-1.843 57.958-5.325l-6.349-40.55c-19.866 3.277-37.274 4.915-51.61 4.915 0 0 0 0 0 0z"></path>
<path class="path3" d="M205.005 303.514l0.614 1.434 37.478-16.384c0.205-1.638 2.662-14.95 37.069-42.803l-25.805-31.744c-35.226 28.467-52.224 53.043-52.224 74.752 0 5.12 1.024 10.035 2.867 14.746v0z"></path>
<path class="path4" d="M686.899 66.765l-8.397-40.141c-25.6 5.325-53.248 12.493-82.125 21.504l11.878 39.117c27.853-8.397 54.272-15.36 78.643-20.48z"></path>
<path class="path5" d="M768.205 56.525c9.421 0 17.408 0.614 23.757 2.048l8.397-40.141c-21.504-4.506-52.019-3.686-90.112 2.253l6.349 40.55c19.866-3.072 37.069-4.71 51.61-4.71z"></path>
<path class="path6" d="M765.133 104.653l25.805 31.744c35.226-28.467 52.224-53.043 52.224-74.752 0-5.12-1.024-10.035-2.867-14.746v0l-38.093 15.36c-0.205-0.41-0.205-0.614-0.205-0.614 0.205 0.205-0.205 13.312-36.864 43.008z"></path>
<path class="path7" d="M689.357 195.584c1.843 1.024 38.093 23.142 51.814 32.768l23.552-33.587c-9.216-6.349-19.046-12.902-29.491-19.456 10.445-6.554 20.275-13.107 29.491-19.456l-23.347-33.382c-13.722 9.626-63.078 39.117-69.018 42.189l16.998 30.925z"></path>
<path class="path8" d="M449.331 48.128c-28.877-8.806-56.525-16.179-82.125-21.504l-8.602 40.141c24.371 5.12 50.79 12.083 78.643 20.685l12.083-39.322z"></path>
<path class="path9" d="M254.566 135.987l25.805-31.744c-34.202-28.058-36.659-43.827-36.659-43.827l-37.683-15.565c0 0-3.482 11.469-3.482 16.179-0.205 21.914 16.998 46.285 52.019 74.957z"></path>
<path class="path10" d="M277.094 56.115c14.541 0 31.949 1.638 51.814 4.915l6.554-40.346c-38.093-6.144-68.608-6.963-90.112-2.458l8.397 40.141c6.349-1.638 14.131-2.253 23.347-2.253z"></path>
<path class="path11" d="M645.325 171.827l18.637-36.454c-24.166-12.493-49.971-24.576-76.39-35.84l-16.179 37.478c25.805 11.059 50.586 22.733 73.933 34.816z"></path>
<path class="path12" d="M716.39 289.382l-6.554 40.346c22.118 3.482 41.779 5.325 58.368 5.325 12.083 0 22.733-1.024 31.744-2.867l-8.397-40.141c-6.349 1.229-14.131 2.048-23.347 2.048-14.336 0.205-31.949-1.434-51.814-4.71z"></path>
<path class="path13" d="M280.576 155.443c9.216 6.349 19.046 12.902 29.491 19.456-10.445 6.554-20.48 13.107-29.491 19.456l23.552 33.587c13.722-9.626 29.286-19.456 46.285-29.491 1.843-1.024 3.686-2.253 5.734-3.277l11.059-20.275 5.939-10.65c-5.734-3.277-11.469-6.349-16.998-9.626-1.843-1.024-3.891-2.253-5.734-3.277-16.998-10.035-32.563-19.866-46.285-29.491l-23.552 33.587z"></path>
<path class="path14" d="M839.475 305.562l2.253-4.301c0 0 1.434-8.397 1.434-11.878 0-21.709-16.998-46.285-52.019-74.752l-25.805 31.744c34.202 27.853 36.864 41.165 37.069 42.803l37.069 16.384z"></path>
<path class="path15" d="M522.854 116.941c9.216-3.686 18.637-6.963 27.853-10.445 9.626-3.482 19.251-6.758 28.672-10.035l-12.902-38.912c-14.336 4.71-28.877 10.035-43.418 15.36-14.541-5.53-29.082-10.65-43.418-15.36l-13.107 38.912c9.421 3.277 19.046 6.554 28.672 10.035 9.011 3.482 18.227 6.963 27.648 10.445z"></path>
<path class="path16" d="M524.698 159.539c-45.875 0-88.678 17.818-121.037 49.971-32.154 32.358-49.971 75.571-49.971 121.856 0 93.798 76.595 169.984 171.008 169.984 44.646 0 86.426-17.613 117.76-49.766 31.13-31.949 48.333-74.752 48.333-120.218 0-46.080-17.203-89.088-48.333-121.651-31.334-32.358-73.114-50.176-117.76-50.176z"></path>
<path class="path17" d="M629.76 542.106h-216.064c-126.566 0-217.088 104.243-217.088 215.245 0 106.086 0 108.134 0 108.134 1.024 119.808 125.542 139.264 327.27 139.264 197.632 0 321.331-19.456 321.331-139.264 0 0 0-15.565 0-108.134-0.205-113.050-88.678-215.245-215.45-215.245z"></path>
<path class="path18" d="M199.475 399.77l14.746-48.947-41.984 29.286-42.189-29.286 14.95 48.947-40.96 31.13 51.2 1.024 16.998 48.333 16.794-48.333 51.2-1.024z"></path>
<path class="path19" d="M943.309 330.342l-41.984 29.286-42.189-29.286 14.95 49.152-40.96 30.925 51.2 1.024 16.998 48.538 16.794-48.538 51.2-1.024-40.755-30.925z"></path>
<path class="path20" d="M124.518 183.296l48.538 16.384-27.853-43.008 30.515-41.165-49.562 13.312-29.491-41.779-2.662 51.2-48.947 15.36 47.718 18.227-0.41 51.2z"></path>
<path class="path21" d="M880.026 205.005l40.96-30.72 43.008 27.648-16.589-48.538 39.731-32.358-51.2 0.819-18.637-47.923-15.155 49.152-50.995 2.867 41.779 29.491z"></path>
</symbol>

Eu dei uma olhada no XML que tenho dos arquivos SVG e tentei aplicar suas convenções ao XML, fazendo o seguinte, mas ainda sem sucesso.

Primeiro, extraí cada bloco <symbol> em seu próprio arquivo .svg

Em seguida, envolvi o <path> s no código como:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024">
<defs>...</defs>
</svg>

Finalmente, após o <def> s, acrescentei o seguinte código para cada path :

<g visibility="inherit">
  <use xlink:href=".path2" opacity="1" fill="#000000" fill-opacity="1"></use>
</g>

Eu também tentei adicionar os atributos em cada <path> :

<path style="visibility: visible;" fill="#000000" stroke="#000000" stroke-width="1" fill-opacity="1" opacity="1" ...></path>

Eu vejo que há perguntas semelhantes aqui sobre ir na outra direção (SVG = > XML), mas nada sobre XML = > SVG.

Obrigado!

    
por TAH 24.01.2017 / 19:59

1 resposta

0

Embora o meu arquivo SVG de exemplo tenha <defs> , remover essa tag (além de adicionar os atributos de estilo, conforme indicado na pergunta) resolveu o problema.

    
por 24.01.2017 / 20:36

Tags