Блог

Фон:

Вот как это выглядит сейчас

  const IconLoader = () => (
  <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <title>Loader Logo</title>
    <g>
      <path
        stroke="currentColor"
        strokeWidth="5"
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
      />
      <path
        stroke="currentColor"
        strokeWidth="5"
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
      />  
    </g>
  </svg>
);
  

Вопрос:

Как мне сделать это один за другим? По строкам? Например: VR

Как прокомментировал @Robert Longson:

Добавьте преобразование translate к одному или обоим путям, чтобы они располагались там, где вы хотите, чтобы они были

Рассмотрите возможность использования transform = «translate(x y)» для перемещения букв на место

 <svg id="logo" xmlns="http://www.w3.org/2000/svg" width="25%" height="25%" viewBox="-4 -4 120 100">
    <title>Loader Logo</title>
    <g stroke="currentColor"
       stroke-width="5"
       stroke-linecap="round"
       stroke-linejoin="round" >
      <path              
        d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
      />
      <path  transform="translate(65 0)"
        d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
      />  
    </g>
  </svg>