Heim > Artikel > Web-Frontend > Wie zeichne ich ein SVG-Logo in HTML5?

Wie zeichne ich ein SVG-Logo in HTML5?

PHPznach vorne: 2023-08-22 23:41:091311Durchsuche

Im nächsten Artikel erfahren wir, wie man ein SVG-Logo in HTML5 zeichnet. Bevor wir mit dem Lesen des Artikels beginnen, wollen wir ein paar Dinge über SVG besprechen. Scalable Vector Graphics (SVG) ist ein Bildformat, das Vektordaten verwendet. Im Gegensatz zu anderen Formaten verwendet SVG zur Erstellung eines Bildes keine eindeutigen Pixel, sondern Vektordaten.

Das Beste daran ist, dass Sie mit SVG Bilder erstellen können, die sich an jede Auflösung anpassen, was sie ideal für Webdesign und viele andere Anwendungen macht.

Schauen wir uns ein einfaches Beispiel an, um SVG besser zu verstehen

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html>
<body>
   <svg width="110" height="150">
      <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="green" />
   </svg>
</body>
</html>

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die einen auf der Webseite gezeichneten SVG-Kreis mit den im obigen Skript angegebenen Abmessungen enthält.

Was ist SVG?

Verwenden Sie SVG (eine Auszeichnungssprache), um zweidimensionale Vektorgrafiken zu beschreiben. Hierbei handelt es sich um eine textbasierte Technologie, die mit anderen Technologien wie CSS, DOM, JavaScript und SMIL verwendet werden kann, um Bilder beliebiger Größe zu beschreiben.

Vektorbilder im SVG-Format können beispielsweise ohne Qualitätsverlust skaliert werden. Im Gegensatz zu Bitmap-Bildern wie JPEG und PNG können sie auch lokalisiert werden, ohne dass ein Grafikeditor erforderlich ist.

Hier ist ein Beispiel für das Zeichnen eines SVG-Logos in HTML5

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

Im folgenden Beispiel erstellen wir ein SVG-Logo auf einer Webseite.

<!DOCTYPE html>
<html>
<body>
   <svg height="130" width="500">
      <defs>
         <linearGradient id="tutorial" x1="10%" y1="5%" x2="90%" y2="10%">
            <stop offset="0"
            style="stop-color:rgb(187, 143, 206);" />
            <stop offset="1"
            style="stop-color:rgb(192, 57, 43);" />
         </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#tutorial)" />
      <text fill="#58D68D" font-size="14" font-family="Verdana"
      x="50" y="86">TUTORIALSPOINT</text>
   </svg>
</body>
</html>

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die aus einer mit einem linearen Farbverlauf gezeichneten Ellipse mit dem Text „TUTORIALSPOINT“ besteht, die als Logo auf der Webseite fungiert.

Die chinesische Übersetzung von

Beispiel 2

lautet:

Beispiel 2

Betrachten Sie das folgende Beispiel: Wir erstellen ein SVG-Logo auf einer Webseite

<!DOCTYPE html>
<html>
<body>
   <svg width="140px" height="320px">
      <rect x="19" y="19" width="110" height="300"
      fill="white" stroke="black" stroke-width="3" />
      <circle cx="75" cy="85" r="30"
      fill="red" stroke="black" stroke-width="2" />
      <circle cx="75" cy="165" r="30"
      fill="yellow" stroke="black" stroke-width="2" />
      <circle cx="75" cy="245" r="30"
      fill="#40CC40" stroke="black" stroke-width="2" />
   </svg>
   <p>FOLLOW TRAFFIC SIGNALS</p>
</body>
</html>

Wenn das obige Skript ausgeführt wird, erzeugt es eine Ausgabe mit einer auf der Webseite gezeichneten Ampel unter Verwendung der im obigen Skript angegebenen Maße, die als Zeichen fungiert.

Beispiel 3

Sehen wir uns ein weiteres Beispiel für die Erstellung eines SVG-Logos auf einer Webseite an.

<!DOCTYPE html>
<html>
<head>
   <title>HTML5 SVG logo</title>
</head>
<body>
   <svg height="170" width="400">
      <defs>
         <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%"
            style="stop-color:rgb(184,78,43);stop-opacity:1" />
            <stop offset="50%"
            style="stop-color:rgb(241,241,241);stop-opacity:1" />
            <stop offset="100%"
            style="stop-color:rgb(255,141,52);stop-opacity:1" />
         </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
      <text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
      x="50" y="86">logo</text>
   </svg>
</body>
</html>

Nachdem Sie das obige Skript ausgeführt haben, wird das Ausgabefenster geöffnet und zeigt das SVG-Logo mit linearem Farbverlauf an, das auf der Webseite mit den im obigen Skript genannten Maßen gezeichnet wurde.

Das obige ist der detaillierte Inhalt vonWie zeichne ich ein SVG-Logo in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 css dom

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich das -Tag in HTML?Nächster Artikel：Wie verwende ich das -Tag in HTML?

`In Verbindung stehende Artikel`

Mehr sehen