Можете ли вы объединить несколько SVG с различными viewBox и настроить каждый в Polymer?

Question

У меня есть несколько svgs, которые я хотел бы использовать в своем приложении, и надеялся поместить их в один элемент custom-svg для индивидуальной ссылки по id, однако viewBoxes разные. Один SVG определяется как

<iron-iconset-svg name="club-icon" size="512">
    <svg>
        <defs>
            <g id="club-icon">
                <path d="bunch of numbers"></path>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>

Другой svg определяется как

<iron-iconset-svg name="club-icon" size="300">
    <svg>
        <defs>
            <g id="book-icon">
                <path d="bunch of numbers"></path>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>

Существует ли способ для каждого настраиваемого значка определять свой собственный viewBox или каждый svg, определенный в одном наборе значков, должен иметь одинаковые свойства. На данный момент у меня есть несколько HTML-файлов пользовательских элементов, но каждый пользовательский элемент представляет собой HTTP-запрос (который я пытаюсь минимизировать).

Answer 1

Это можно сделать с помощью символов.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

</svg>

Смотрите эту статью о хитростях CSS для дальнейшего объяснения.

https://css-tricks.com/svg-symbol-good-choice-icons/

Answer 2

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

<g id="book-icon" transform="scale(1.71)">

1,71 = 512/300

или если вы используете gulp/grunt, вы можете изменить размер SVG, чтобы он был таким же, используя svg-scaler или тому подобное