Как нарисовать букву Z для иконки?

230

07 сентября 2021, 11:10

Мне нужно нарисовать букву Z на SVG для иконки.

<?xml version="1.0" encoding="iso-8859-1"?> 
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 32 32"> 
       <path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0  
       0 1 2-2z" fill="#e35604"></path> 
       <path d="БУКВА Z"></path> 
    </svg>

Чтобы получить такую иконку:

Answer 1

Ответ @Air правильный, красивый и будет полезен в любом случае.

Но, так как символ Z нарисован двойным контуром, будет невозможно сделать анимацию рисования буквы по всей ширине строки.

Стрелками показаны узловые точки.

Чтобы нарисовать одиночный контур нужно выбирать в векторном редакторе инструмент - Рисовать кривые Безье и прямые линии - Shift+F6

Чтобы убрать из файла SVG лишнюю информацию, которую сохраняет векторный редактор необходимо оптимизировать файл с помощью любого оптимизатора, например - SVG EDITOR

Как пользоваться оптимизатором - подробно, на примерах

Другие оптимизаторы

На выходе получаем код:

<svg xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="15%" height="15%" viewBox="0 0 32 32" version="1.1" > 
  <!-- Прямоугольник с закругленными углами --> 
  <path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0  
       0 1 2-2z" fill="#D94937"></path> 
 <!-- Символ Z --> 
 <path  d="M6.5 4.3H25.9v2.3l-18 19.1 0 2.2 19.4 0" style="fill:none;stroke-width:4;stroke:white"/> 
  </path>  
</svg>

Чтобы сделать SVG адаптивным ширину и высоту холста SVG нужно указывать в процентах

width="15%" height="15%"

Анимация контура `"Z"`

Полная длина контура буквы равна 70px

Анимация рисования линии достигается изменением stroke-dashoffset от максимума до нуля values="70;0"

<svg xxmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="15%" height="15%" viewBox="0 0 32 32" version="1.1" style="fill:"> 
  <!-- Прямоугольник с закругленными углами --> 
  <path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0  
       0 1 2-2z" fill="#D94937"></path> 
 <!-- Символ Z --> 
 <path stroke-dasharray="70" stroke-dashoffset="70" d="M6.5 4.3H25.9v2.3l-18 19.1 0 2.2 19.4 0" style="fill:none;stroke-width:4;stroke:white">  
   <animate 
     attributeName="stroke-dashoffset" 
	 values="70;0;0" 
	 dur="2s" 
	 fill="freeze" 
	 repeatCount="indefinite" /> 
  </path>  
</svg>

Вариант рисования - туда-обратно

<svg xxmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="15%" height="15%" viewBox="0 0 32 32" version="1.1" style="fill:"> 
  <!-- Прямоугольник с закругленными углами --> 
  <path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0  
       0 1 2-2z" fill="#D94937"></path> 
 <!-- Символ Z --> 
 <path stroke-dasharray="70" stroke-dashoffset="70" d="M6.5 4.3H25.9v2.3l-18 19.1 0 2.2 19.4 0" style="fill:none;stroke-width:4;stroke:white">  
   <animate 
     attributeName="stroke-dashoffset" 
	 values="70;0;0;70;70" 
	 dur="5s" 
	 fill="freeze" 
	 repeatCount="indefinite" /> 
  </path>  
</svg>

Answer 2

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400"> 
       <path  fill="#e35604"  d="M385,400H15c-8.3,0-15-6.7-15-15V15C0,6.7,6.7,0,15,0h370c8.3,0,15,6.7,15,15v370 
			C400,393.3,393.3,400,385,400z"/> 
        
      <path fill="white" d="M50,50 350,50 350,100 150,300 350,300 350,350 50,350 50,300 250,100 50,100z" /> 
</svg>

Answer 3

Такое элементарно строится "by hand" - по точкам:

d="M-12,-12 h23 L-12,12 h23"

path { 
  animation: 2s fill; 
} 
 
@keyframes fill{ 
  from {stroke-dasharray: 0 100} 
  to {stroke-dasharray: 100 100} 
}

<svg viewbox=-20,-20,40,40 height=100px width=100px> 
  <rect x=-17 y=-17 width=34 height=34 rx=5 fill=orange></rect> 
  <path d="M-12,-12 h23 L-12,12 h23" stroke=white fill=none  
        stroke-miterlimit=2 stroke-width=5></path> 
</svg> 
 
<svg viewbox=-20,-20,40,40 height=100px width=100px> 
  <rect x=-17 y=-17 width=34 height=34 rx=5 fill=orange></rect> 
  <path d="M-12,-12 h23 L-12,12 h23" stroke=white fill=none  
        stroke-linejoin=round stroke-linecap=round  
        stroke-width=5></path> 
</svg> 
 
<svg viewbox=-20,-20,40,40 height=100px width=100px> 
  <defs><mask id=mask> 
    <rect x=-12 y=-15 width=24 height=30 fill=white></rect> 
  </mask></defs> 
  <rect x=-17 y=-17 width=34 height=34 rx=5 fill=orange></rect> 
  <path d="M-12,-12 h23 L-12,12 h23" stroke=white fill=none  
        stroke-width=5 mask=url(#mask)></path> 
</svg>

Answer 4

Так ?

<svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg"> 
<rect width="100%" height="100%" rx="10" fill="#d94937" /> 
<text x="25" y="75" style="font-family:sans-serif;font-weight:900;font-size:100px;fill:#fff;"> z </text> 
</svg>

Answer 5

Update

Дополнительные пояснения по комментариям

Хватило бы 4 узловых точек для начертания "Z"

Но в этом случае невозможно сделать вертикальную обрезку, как в образце автора вопроса

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

И перемещая рычаги управления этих узловых точек добился вертикального среза