Несоответствие между SVG файлом и векторным ресурсом Android Studio

Я использую программное обеспечение Sketch для создания изображений svg для использования в моем проекте Android. У меня проблема с этим:

Как вы можете видеть, изображение в порядке, и я проверил предварительные просмотры с помощью предварительного просмотра Chrome и Macos.

Когда я пытаюсь импортировать SVG в Android Studio, предварительный просмотр импорта следующий:

Вычитанные круги внутри заполненных пропали. Журнал импорта сообщает мне следующее:

In ic_percent.svg:
[email protected] line 10 We don't scale the stroke width!
[email protected] line 11 We don't scale the stroke width!
[email protected] line 12 We don't scale the stroke width!
[email protected] line 13 We don't scale the stroke width!

Кто-нибудь знает, что происходит с моим ввозом?

Ответ 1

У меня возникли аналогичные проблемы при импорте файла .svg, сделанного с помощью Inkscape. Кажется, что некоторые атрибуты просто не поддерживаются импортером Android Studio.

Самый простой способ - использовать svg2android. Не уверен, как он обрабатывает Sketch.svg, но он, похоже, делает трюк с файлами из Inkscape.

Если кто-то использует Inkscape, не забудьте установить размер вашего документа в свой векторный размер "Файл → Свойства документа..." или просто отредактировать его непосредственно в файле с помощью текстового редактора.

Ответ 2

Вот как:

Откройте ваш .svg в эскизе
Выберите отсутствующий круг в списке страниц. В моем случае это выглядит так.

Нажмите "Заливки" (значок "Gear shaped" ) и измените "Четный-Нечетный" на "Без нуля"

меню "Открыть слой" → "Путь" → "Обратный порядок"

Экспортируйте форму обратно в формат .svg

Преобразуйте этот .svg в векторный Drawable (из Android Studio или сторонних инструментов).

Что это! Кредит @dineshbob средний блог

Ответ 3

В Inkscape вы можете выбрать строки a.s.o. которые используют ширину штриха и конвертируют их в путь перед сохранением как sgv:

Ответ 4

Краткий ответ: Разгруппируйте все, что у вас есть в SVG, убедитесь, что у вас нет преобразований слоев и сохраните их.

Длинный ответ: каждый штрих имеет ширину, он числовой и кодируется в SVG как

<path style="...;stroke-width=1.5;...">

В то же время каждый сток - это объект, и объекты могут быть сгруппированы для удобства редактирования. Группы также являются объектами, поэтому могут быть сгруппированы так, что группы могут иметь вложенные группы. Что наиболее важно, группы имеют преобразования, которые создаются при перемещении или масштабировании или повороте сгруппированных объектов (например, путей) в векторном редакторе и которые кодируются в SVG как

<g transform="...">
  <path .../>
  <path .../>
  <some other object .../>
</g>

Атрибут "transform" может быть либо "матрицей", либо последовательностью линейных преобразований, таких как "rotate" или "translate", или чем угодно, в данном случае это не имеет значения. Все преобразования группы применяются ко всем содержащимся в объекте свойствам.

Таким образом, группа "transform" применяется к содержащемуся пути "stroke-width".

Это именно то, что Android Studio не поддерживает.

Решение простое: разгруппировать все группы и заставить векторный редактор применять преобразования к реальным геометрическим объектам. Затем снова экспортируйте.

В результирующем файле все еще будут группы, что хорошо - это единственный способ сохранить слои в SVG. Просто убедитесь, что к слоям в файле не применены преобразования. Скорее всего, вам не нужно ничего делать для этого, так как подавляющее большинство векторных редакторов могут иметь только визуальные, а не геометрические эффекты.

Это.

Пример куска очень простого файла, который нарушит импорт Android Studio. Это всего два случайных мазка, сгруппированных и масштабированных мышью:

<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       id="g821"
       transform="matrix(0.74621726,0,0,1.3160501,48.238048,-10.434556)">
      <path
         inkscape:connector-curvature="0"
         id="path815"
         d="m 58.964284,69.458334 31.75,-5.291667"
         style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         inkscape:connector-curvature="0"
         id="path817"
         d="M 77.863093,95.160713 112.6369,77.017855"
         style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>

То же самое после разгруппировки, что хорошо для Android Studio:

<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="fill:none;stroke:#000000;stroke-width:0.26219916px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 92.238214,80.976091 115.93061,74.011993"
       id="path815"
       inkscape:connector-curvature="0" />
    <path
       style="fill:none;stroke:#000000;stroke-width:0.26219916px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 106.34083,114.80171 132.28965,90.9248"
       id="path817"
       inkscape:connector-curvature="0" />
  </g>

Ответ 5

У меня была такая же проблема с использованием Inkscape. Не уверен, что будет работать со Sketch, но просто попробовать.

Просто запустите новый проект Sketch и вставьте вектор из предыдущего. Это решило мою проблему с такой же ситуацией на Inkscape. Кажется, некоторые дополнительные свойства, используемые при создании картинки, не приветствуются в инструменте импорта Android.