Какие атрибуты не нужны в коде inline-SVG - PullRequest
0 голосов
/ 25 мая 2018

Я работаю над проектом, который генерирует сверхсильные пароли (для практики).

При использовании встроенного SVG мне просто было интересно, есть ли какие-либо ненужные атрибуты в коде SVG, потому что я пытаюсьчтобы сделать его как можно короче.

В этом конкретном фрагменте у меня есть значок копирования в буфер обмена.

Вот код:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 488.3 488.3" style="enable-background:new 0 0 488.3 488.3;" xml:space="preserve">
<g>
    <g>
        <path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124
            C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124
            c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/>
        <path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227
            c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6
            V38.6C439.65,17.3,422.35,0,401.05,0z"/>
    </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

1 Ответ

0 голосов
/ 25 мая 2018

Давайте начнем с того, что обычно излишне:

  • version="1.1" не интерпретируется ни одним браузером или средством визуализации, о котором я знаю.
  • style="enable-background:new 0 0 488.3 488.3;" При установке атрибута стиля вВообще может быть хорошей идеей, свойство enable-background является устаревшим и никогда не было реализовано где-либо

Следующее может иметь или не иметь свое место, в зависимости от обстоятельств:

  • <?xml version="1.0" encoding="iso-8859-1"?> должна быть первой строкой отдельного SVG-файла, соответствующего XML.Обратите внимание, кодировка не является значением по умолчанию utf-8.Если SVG используется встроенным в HTML, браузеры просто игнорируют эту строку (если это не первая строка документа), но, строго говоря, ее использование в любом другом месте нарушает XML-корректность.
  • xmlns:xlink="http://www.w3.org/1999/xlink"Определение пространства имен необходимо только в том случае, если у вас действительно есть элемент / атрибут, где он используется, например, <use xlink:href="..." />.Даже тогда большинство браузеров в настоящее время поддерживают безымянное пространство имен href.
  • xml:space="preserve" полезно, только если у вас есть <text> элементов с <tspan> дочерними элементами.Затем он будет определять, будет ли пробел между этими дочерними тегами интерпретироваться как пробел.
  • x="0px" y="0px" На самом внешнем элементе <svg> в автономном файле x и y всегда игнорируются.Если SVG встроен в другой контент, значения, отличные от значения по умолчанию 0, могут иметь влияние в зависимости от языка хоста.(В HTML вам, вероятно, придется использовать CSS top и left.)

И, наконец, чего не хватает:

  • widthи height имеют значение по умолчанию 150px и 100px, когда SVG используется в строке.(Для автономных файлов значения viewBox будут использоваться, если они отсутствуют.)
  • preserveAspectRatio имеет значение по умолчанию xMidYMid meet.Он определяет, как viewBox вписывается в размеры SVG, если пропорции width, height и viewBox не совпадают.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...