Как нарисовать букву S?

Question

У меня есть иконка с фоном, в которой нужно нарисовать букву S.
Пытаюсь сделать это сам, но выходит криво =)

<?xml version="1.0" encoding="iso-8859-1"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" 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="#333"></path>
    </svg>

Answer 1

Без редактора: 2 квадратичные и 2 кубические кривые Безье

<svg width="175px" height="175px" viewBox="0 0 16 16">
  <path fill="none" stroke="#333" stroke-width="2" d="
    m 3 10
    c 0 4 8 4 8 0
    q 0 -2 -4 -3 
    q -4 -1 -4 -3 
    c 0 -4 8 -4 8 0
    "></path>
</svg>

Небольшое визуальное пояснение:

<svg width="175px" height="175px" viewBox="0 0 16 16">
  <path fill="none" stroke="#333" stroke-width="2" d=" m 3 10 c 0 4 8 4 8 0 q 0 -2 -4 -3 q -4 -1 -4 -3  c 0 -4 8 -4 8 0 "></path>
  <path stroke="red" stroke-width="0.2" fill='none' d="m 3 10 0 4 8 0 0 -4 "></path> 
  <path stroke="blue" stroke-width="0.2" fill='none' d=" m 11 10 0 -2 -4 -1 "></path> 
  <circle cx=3 cy=10 r=0.5 fill='cyan' />
  <circle cx=11 cy=10 r=0.5 fill='cyan' />
  <circle cx=7 cy=7 r=0.5 fill='cyan' />
  <circle cx=3 cy=14 r=0.5 fill='green' />
  <circle cx=11 cy=14 r=0.5 fill='green' />
  <circle cx=11 cy=8 r=0.5 fill='green' />
</svg>

PS: 3 кубических кривых:

<svg width="175px" height="175px" viewBox="0 0 16 16">
  <path fill="none" stroke="#333" stroke-width="2" d="
    m 3 10
    c 0 4 8 4 8 0
    c 0 -4 -8 -2 -8 -6 
    c 0 -4 8 -4 8 0
    "></path>
</svg>

Answer 2

Этот ответ ориентирован на людей начинающих осваивать SVG.

Понятно, что у людей с уровнем знаний SVG, позволяющих вручную писать формулы кривых Безье, таких вопросов бы не возникло:

Как нарисовать букву S?

Поэтому начнем с самого простого, как с помощью векторного редактора получить path реализующий контуры любой буквы и даже слова целиком.

Шаг 1.

Загружаете файл из вопроса в векторный редактор, допустим в Inkscape

Шаг 2.

Выбираете на панели инструментов Создавать и править текстовые объекты

Шаг 3.

Вводите символ S и выбираете шрифт - в данном примере Arial, размер шрифта - 32px

Шаг 4.

Выбираете - контур / оконтурить (красная стрелка 2 на рисунке ниже)

Шаг 5.

Сохраняете файл и копируете path

Для наглядности, как на картинке width="320" height="320"

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="320" height="320" 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="#333"/>
  <g transform="matrix(0.97490305,0,0,0.9227226,0.37033357,1.2847719)" >
   <path fill="#ffffff" d="m4 21.6c1.3-0.1 2.5-0.2 3.8-0.3 0.2 2.3 1.3 4.6 3.4 5.7 3 1.7 6.8 1.8 10 0.6 2.1-0.7 3.7-3 3.2-5.3C23.9 20.1 21.7 19 19.7 18.5 16.1 17.4 12.3 17 8.9 15.2 6.5 13.9 4.9 11.3 5.1 8.5 5.2 5.2 7.6 2.3 10.7 1.3 14.2 0 18.2 0.1 21.7 1.4 24.7 2.5 27 5.5 27.3 8.7 27.7 9.6 26.9 9.6 26.2 9.6 25.3 9.7 24.4 9.7 23.5 9.8 23.3 7.4 21.8 5.1 19.4 4.4 17.1 3.8 14.5 3.8 12.2 4.5 10.1 5.1 8.4 7.5 9.2 9.7 9.8 11.7 12 12.3 13.8 12.8c3.5 1.1 7.4 1.4 10.6 3.3 2.5 1.5 4.1 4.4 3.8 7.3-0.2 3.5-2.8 6.5-6.1 7.6C18.8 32.3 15 32.2 11.5 31.3 8.1 30.4 5.2 27.7 4.3 24.2 4.1 23.4 4 22.5 4 21.6Z"/>
  </g>
</svg>

Рабочий размер в режиме иконки width="32" height="32"

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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="#333"/>
  <g transform="matrix(0.97490305,0,0,0.9227226,0.37033357,1.2847719)" >
   
   <path fill="#ffffff" d="m4 21.6c1.3-0.1 2.5-0.2 3.8-0.3 0.2 2.3 1.3 4.6 3.4 5.7 3 1.7 6.8 1.8 10 0.6 2.1-0.7 3.7-3 3.2-5.3C23.9 20.1 21.7 19 19.7 18.5 16.1 17.4 12.3 17 8.9 15.2 6.5 13.9 4.9 11.3 5.1 8.5 5.2 5.2 7.6 2.3 10.7 1.3 14.2 0 18.2 0.1 21.7 1.4 24.7 2.5 27 5.5 27.3 8.7 27.7 9.6 26.9 9.6 26.2 9.6 25.3 9.7 24.4 9.7 23.5 9.8 23.3 7.4 21.8 5.1 19.4 4.4 17.1 3.8 14.5 3.8 12.2 4.5 10.1 5.1 8.4 7.5 9.2 9.7 9.8 11.7 12 12.3 13.8 12.8c3.5 1.1 7.4 1.4 10.6 3.3 2.5 1.5 4.1 4.4 3.8 7.3-0.2 3.5-2.8 6.5-6.1 7.6C18.8 32.3 15 32.2 11.5 31.3 8.1 30.4 5.2 27.7 4.3 24.2 4.1 23.4 4 22.5 4 21.6Z"/>
  </g>
</svg>

БЛОГ НА HUSL

Как нарисовать букву S?

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

Этот ответ ориентирован на людей начинающих осваивать SVG.