SVG-Logo-Text anstelle eines Bildes, das in froont.com verwendet wird?

Ich schaue mir das Design einer Website http://www.froont.com an und sie scheinen den Logotext mit SVG zu generieren. Ich kann absolut nicht verstehen, wie man auf diese Weise Logotext generiert? Hilfe wird geschätzt, um zu verstehen, was hier vor sich geht?

Hier ist das, was ich in der HTML-Quelle sehe.

Bild/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>

Antworten (1)

Es ist normal, dass Sie keine Texte sehen, das liegt nur daran, dass kein Text vorhanden ist. Das Logo sind die Pfade, die Sie kopieren. Sie sehen, 6 Pfade, jeder für jeden Buchstaben. Wenn Sie ein Vektorzeichenprogramm haben, ist es üblich, einen Text zu schreiben und die Option zu haben, die Umrisse zu erstellen. Dann geht der Text verloren und Sie erhalten die Pfade der einzelnen Buchstaben.

Die wichtige Frage ist, ob dies eine gute SEO-Option ist. Wenn Sie den Code überprüfen, können Sie sehen, dass h1 der Seite nicht den Namen des Unternehmens enthält, und das ist ein häufiges Muster.