БЛОГ НА HUSL


Gradient для Векторных изображений в XML

Автор вопроса: Vlad Bulan

Имею векторное изображение в фигмевведите сюда описание изображения но при конвертации в Android studio в XML выходит это изображение: введите сюда описание изображения Проще говоря теряеться слой тени и теперь по краям нет тени вовсе. Как сделать так чтобы цвет даной вектороной картинки был по градиенту? XML код векторного изображение в Android Studio

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportWidth="32"
    android:viewportHeight="32">
  <group>
    <clip-path
        android:pathData="M0,0h32v32h-32z"/>
    <path
        android:pathData="M11.5692,14.5455H26.3384H27.8153C29.2923,14.5455 30.7692,16 30.7692,17.4545V29.0909C30.7692,30.8364 28.7999,31.7576 27.8153,32H4.1846C1.8215,32 1.2307,30.0606 1.2307,29.0909V17.4545C1.2307,16 2.7076,14.5455 4.1846,14.5455H5.6615C5.6615,13.2851 5.6384,11.7517 5.6615,10.1818C5.6615,8 5.6615,7.2727 7.1384,4.3636C8.6153,1.4546 13.0461,0 15.9999,0C20.4307,0 23.3846,2.1818 24.8615,4.3636C25.8588,5.837 26.2248,7.414 26.3146,9.1822C26.3427,9.7338 25.8907,10.1818 25.3384,10.1818H21.4307C20.8784,10.1818 20.4357,9.7299 20.3151,9.191C19.9808,7.698 18.8493,5.8182 15.9999,5.8182C12.4553,5.8182 11.5692,8.7273 11.5692,10.1818V14.5455Z"
        android:fillColor="@color/brown_active"/>
  </group>
</vector>

Нашел приблизительный вопрос на другом стеке но он мне не особо подходит так как Контур идет за векторным изображением и увеличевает высоту и ширину изображения

SVG

  <svg viewBox="55 120 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <filter id="filter0_i_164_3914" x="54" y="120" width="32" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="2"/>
            <feGaussianBlur stdDeviation="2"/>
            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_164_3914"/>
        </filter>
        <g filter="url(#filter0_i_164_3914)">
            <mask id="mask2_164_3914" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="54" y="120" width="32" height="32">
                <rect x="54" y="120" width="32" height="32" fill="#D58900"/>
            </mask>
            <g mask="url(#mask2_164_3914)">
                <path d="M65.5694 134.545H80.3387H81.8156C83.2925 134.545 84.7694 136 84.7694 137.455V149.091C84.7694 150.836 82.8002 151.758 81.8156 152H58.1848C55.8217 152 55.231 150.061 55.231 149.091V137.455C55.231 136 56.7079 134.545 58.1848 134.545H59.6617C59.6617 133.285 59.6387 131.752 59.6617 130.182C59.6617 128 59.6617 127.273 61.1386 124.364C62.6156 121.455 67.0463 120 70.0002 120C74.431 120 77.3848 122.182 78.8617 124.364C79.8591 125.837 80.225 127.414 80.3149 129.182C80.3429 129.734 79.8909 130.182 79.3387 130.182H75.431C74.8787 130.182 74.436 129.73 74.3153 129.191C73.981 127.698 72.8495 125.818 70.0002 125.818C66.4556 125.818 65.5694 128.727 65.5694 130.182V134.545Z" fill="#D58900"/>
            </g>
        </g>
    </svg>

P.S.: сетку в первом рисунке прошу не учитывать


Источник

Ответы (3 шт):

Автор решения: Alexandr_TT

Попробуйте в исходнике svg файла удалить clipPath

<clipPath>
    <path d="M0,0h32v32h-32z" stroke="black" fill="none"/>
  </clipPath>

clipPath не нужен, возможно из-за него исчезает слой тени по краям.

Смотрите, что получается, вот видимо так выглядел исходник svg без clipPath:

Красная рамка это граница холста svg - 32x32

console.log(path.getBBox())
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        width="320" height="320" viewBox="0 0 32 32" style="border:1px solid red;" >  

<path id="path" fill="#D58900" d="M11.5692,14.5455H26.3384H27.8153C29.2923,14.5455 30.7692,16 30.7692,17.4545V29.0909C30.7692,30.8364 28.7999,31.7576 27.8153,32H4.1846C1.8215,32 1.2307,30.0606 1.2307,29.0909V17.4545C1.2307,16 2.7076,14.5455 4.1846,14.5455H5.6615C5.6615,13.2851 5.6384,11.7517 5.6615,10.1818C5.6615,8 5.6615,7.2727 7.1384,4.3636C8.6153,1.4546 13.0461,0 15.9999,0C20.4307,0 23.3846,2.1818 24.8615,4.3636C25.8588,5.837 26.2248,7.414 26.3146,9.1822C26.3427,9.7338 25.8907,10.1818 25.3384,10.1818H21.4307C20.8784,10.1818 20.4357,9.7299 20.3151,9.191C19.9808,7.698 18.8493,5.8182 15.9999,5.8182C12.4553,5.8182 11.5692,8.7273 11.5692,10.1818V14.5455Z" />

</svg>

Добавляем clip-path:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        width="50%" height="50%" viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >  
<defs>
  <clipPath id="cp">
    <path d="M0,0h32v32h-32z" stroke="black" fill="none"/>
  </clipPath>
</defs>

<path clip-path="url(#cp)" fill="#D58900" d="M11.5692,14.5455H26.3384H27.8153C29.2923,14.5455 30.7692,16 30.7692,17.4545V29.0909C30.7692,30.8364 28.7999,31.7576 27.8153,32H4.1846C1.8215,32 1.2307,30.0606 1.2307,29.0909V17.4545C1.2307,16 2.7076,14.5455 4.1846,14.5455H5.6615C5.6615,13.2851 5.6384,11.7517 5.6615,10.1818C5.6615,8 5.6615,7.2727 7.1384,4.3636C8.6153,1.4546 13.0461,0 15.9999,0C20.4307,0 23.3846,2.1818 24.8615,4.3636C25.8588,5.837 26.2248,7.414 26.3146,9.1822C26.3427,9.7338 25.8907,10.1818 25.3384,10.1818H21.4307C20.8784,10.1818 20.4357,9.7299 20.3151,9.191C19.9808,7.698 18.8493,5.8182 15.9999,5.8182C12.4553,5.8182 11.5692,8.7273 11.5692,10.1818V14.5455Z" />
   <path d="M0,0h32v32h-32z" fill="none" stroke="black" stroke-width="2" />
</svg>

Теперь слой clip-path полностью накрывает слой svg с изображением.
Можно предположить, что это одна из возможных причин исчезновения тени по краям.

→ Ссылка
Автор решения: Alexandr_TT

Оптимизировал исходник => SVGOMG за счет уменьшения знаков после десятичной запятой.

Физический размер иконки замка узнал с помощью

<script>
console.log(lock.getBBox())
</script>

где lock это - ID path замка

Установил эти цифры в шапке svg файла.

Чёрная рамка - это граница холста SVG, после настройки её надо удалить style="border:1px solid" Немного подкорректировал размеры в шапке SVG, чтобы фигура не касалась рамки. Это гарантирует, что не будет обрезов, в случае выхода фигуры за холст SVG/
Размер иконки видимо проектировался 32х32px
Здесь увеличил для просмотра в 10 раз - width="300" height="330"

<svg width="300" height="330" viewBox="55 119.5 30 33" fill="none" xmlns="http://www.w3.org/2000/svg"
 style="border:1px solid">
    <!-- строка в редакторе 19 -26 -->
  <g filter="url(#filter0_i_164_3914)">
    <mask id="mask2_164_3914" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="54" y="120" width="32" height="32">
      <path fill="#D58900" d="M54 120h32v32H54z"/>
    </mask>
    <g mask="url(#mask2_164_3914)">
      <path id="lock" d="M65.6 134.5h16.2c1.5 0 3 1.5 3 3V149c0 1.7-2 2.7-3 2.9H58.2c-2.4 0-3-2-3-3v-11.5c0-1.5 1.5-3 3-3h1.5v-4.3c0-2.2 0-3 1.4-5.8 1.5-3 6-4.4 8.9-4.4 4.4 0 7.4 2.2 8.9 4.4a9 9 0 0 1 1.4 4.8c0 .5-.4 1-1 1h-3.9c-.5 0-1-.5-1-1a4.1 4.1 0 0 0-4.4-3.4c-3.5 0-4.4 3-4.4 4.4v4.3Z" fill="#D58900"/>
    </g>
  </g>
<defs> 
             <!-- строка в редакторе 2906 -->
<filter id="filter0_i_164_3914" x="54" y="120" width="32" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_164_3914"/>
</filter>
</defs>
</svg> 

<script>
console.log(lock.getBBox())
</script>

→ Ссылка
Автор решения: Vlad Bulan

После долгих и мучительных експериментов я нашел ответ вот в этих статьях

https://blog.stylingandroid.com/vectordrawable-gradients-part1/

https://blog.stylingandroid.com/vectordrawable-gradients-part1-2/

Они полностью отвечают на мой вопрос

Спасибо большое @Alexandr_TT и @Leonid за помощь с SVG

На случай если пропадет куда то блог

<vector xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:aapt="http://schemas.android.com/aapt"
  android:width="96dp"
  android:height="96dp"
  android:viewportHeight="100"
  android:viewportWidth="100">
 
  <path
    android:pathData="M1,1 H99 V99 H1Z"
    android:strokeColor="?android:attr/colorAccent"
    android:strokeWidth="2">
    <aapt:attr name="android:fillColor">
      <gradient
        android:centerX="50"
        android:centerY="50"
        android:type="sweep">
        <item
          android:color="?android:attr/colorPrimary"
          android:offset="0.0" />
        <item
          android:color="?android:attr/colorPrimaryDark"
          android:offset="1.0" />
 
      </gradient>
    </aapt:attr>
  </path>
</vector>
→ Ссылка

licensed under cc by-sa 3.0 with attribution.