Текст логотипа SVG вместо изображения, используемого на froont.com?

Я смотрю на дизайн веб-сайта http://www.froont.com , и они, кажется, генерируют текст логотипа с использованием SVG. Я совершенно не могу понять, как генерировать текст логотипа таким образом? Помощь приветствуется в понимании того, что здесь происходит?

Вот что я вижу в исходнике HTML.

изображение/svg+xml

<g transform="matrix(1.25,0,0,-1.25,405.36856,595.03461)" id="g3099">
  <path d="m 0,0 -11.312,0 0,5.734 29.193,0 0,-5.734 -11.313,0 0,-31.174 -6.568,0 L 0,0 z" id="path3101" fill="#ffffff" fill-opacity="1" fill-rule="nonzero"/>
</g>
<g transform="matrix(1.25,0,0,-1.25,172.28019,587.86661)" id="g3079">
  <path d="m 0,0 23.823,0 0,-5.734 -17.255,0 0,-10.113 16.266,0 0,-5.526 -16.266,0 0,-15.535 -6.568,0 L 0,0 z" id="path3081" fill="#ffffff" fill-opacity="1" fill-rule="nonzero"/>
</g>
<g transform="matrix(1.25,0,0,-1.25,223.90856,607.74086)" id="g3083">
  <path d="m 0,0 c 3.703,0 7.925,0.886 7.925,5.37 0,4.014 -3.962,5.004 -7.351,5.004 l -5.942,0 L -5.368,0 0,0 z m -11.937,15.899 12.824,0 c 6.933,0 13.605,-2.762 13.605,-10.582 0,-5.317 -3.283,-8.809 -8.444,-9.957 l 9.852,-16.369 -7.923,0 -8.549,15.64 -4.796,0 0,-15.64 -6.569,0 0,36.908 z" id="path3085" fill="#ffffff" fill-opacity="1" fill-rule="nonzero"/>
</g>

<g transform="matrix(1.25,0,0,-1.25,317.20206,627.81049)" id="g3091">
  <path d="m 0,0 c 7.559,0 12.72,5.734 12.72,13.605 0,7.612 -5.056,13.502 -12.72,13.502 -7.612,0 -12.668,-5.89 -12.668,-13.502 C -12.668,5.734 -7.508,0 0,0 m -0.053,32.894 c 11.522,0 19.913,-7.455 19.913,-19.289 0,-11.519 -8.391,-19.496 -19.913,-19.496 -11.364,0 -19.756,7.977 -19.756,19.496 0,11.834 8.392,19.289 19.756,19.289" id="path3093" fill="#ffffff" fill-opacity="1" fill-rule="nonzero"/>
</g>
<g transform="matrix(1.25,0,0,-1.25,269.63856,627.81049)" id="g3087">
  <path d="m 0,0 c 7.558,0 12.719,5.734 12.719,13.605 0,7.612 -5.057,13.502 -12.719,13.502 -7.611,0 -12.668,-5.89 -12.668,-13.502 C -12.668,5.734 -7.508,0 0,0 m -0.053,32.894 c 11.521,0 19.913,-7.455 19.913,-19.289 0,-11.519 -8.392,-19.496 -19.913,-19.496 -11.364,0 -19.757,7.977 -19.757,19.496 0,11.834 8.393,19.289 19.757,19.289" id="path3089" fill="#ffffff" fill-opacity="1" fill-rule="nonzero"/>
</g>

<g transform="matrix(1.25,0,0,-1.25,346.27181,587.86661)" id="g3095">
  <path d="m 0,0 8.705,0 17.15,-27.628 0.105,0 0,27.628 6.568,0 0,-36.908 -8.341,0 -17.514,28.515 -0.106,0 0,-28.515 -6.567,0 L 0,0 z" id="path3097" fill="#ffffff" fill-opacity="1" fill-rule="nonzero"/>
</g>

Ответы (1)

Это нормально, что вы не видите текстов, это просто потому, что текста нет. Логотип — это пути, которые вы копируете. Видите ли, 6 путей, каждый на каждую букву. Если у вас есть программа для векторного рисования, обычно вы пишете текст и имеете возможность «создать контуры». Затем текст теряется, и вы получаете пути каждой буквы.

Важный вопрос заключается в том, является ли это хорошим вариантом SEO. Если вы проверите код, вы увидите, что в h1 страницы нет названия компании, и это распространенный шаблон.