Comment dessiner un logo SVG en HTML5 ?-tutoriel HTML-php.cn

Comment dessiner un logo SVG en HTML5 ?

PHPz

Libérer： 2023-08-22 23:41:09

avant

1354 Les gens l'ont consulté

Comment dessiner un logo SVG en HTML5 ?

Dans le prochain article, nous apprendrons comment dessiner un logo SVG en HTML5. Avant de commencer la lecture de l’article, discutons de quelques éléments concernant SVG. Scalable Vector Graphics (SVG) est un format d'image qui utilise des données vectorielles. Contrairement à d'autres formats, SVG n'utilise pas de pixels uniques pour construire une image, mais utilise plutôt des données vectorielles.

La meilleure chose à propos de son utilisation est qu'en utilisant SVG, vous pouvez créer des images qui s'adaptent à n'importe quelle résolution, ce qui les rend idéales dans la conception Web et dans de nombreuses autres applications.

Regardons un exemple simple pour mieux comprendre SVG

La traduction chinoise de

Exemple

est :

Exemple

<!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>

Copier après la connexion

Lorsque le script est exécuté, il générera une sortie contenant un cercle SVG dessiné sur la page Web en utilisant les dimensions données dans le script ci-dessus.

Qu'est-ce que SVG

Utilisez SVG (un langage de balisage) pour décrire des graphiques vectoriels bidimensionnels. Il s'agit d'une technologie basée sur le texte qui peut être utilisée avec d'autres technologies telles que CSS, DOM, JavaScript et SMIL pour décrire des images de n'importe quelle taille.

Les images vectorielles au format SVG, par exemple, peuvent être mises à l'échelle sans perte de qualité. Contrairement aux images bitmap comme JPEG et PNG, elles peuvent également être localisées sans avoir recours à un éditeur graphique.

Voici un exemple de dessin d'un logo SVG en HTML5

La traduction chinoise de

Exemple 1

est :

Exemple 1

Dans l'exemple ci-dessous, nous créons un logo SVG sur une page Web.

<!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>

Copier après la connexion

Lorsque le script sera exécuté, il générera une sortie constituée d'une ellipse dessinée avec un dégradé linéaire avec le texte "TUTORIALSPOINT", qui fait office de logo sur la page Web.

La traduction chinoise de

Exemple 2

est :

Exemple 2

Considérez l'exemple suivant, nous créons un logo SVG sur une page Web

<!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>

Copier après la connexion

Lorsque le script ci-dessus est exécuté, il produira une sortie contenant un feu de signalisation dessiné sur la page Web en utilisant les mesures données dans le script ci-dessus, qui fait office de signe.

Exemple 3

Regardons un autre exemple de création d'un logo SVG sur une page Web.

<!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>

Copier après la connexion

Après avoir exécuté le script ci-dessus, la fenêtre de sortie apparaîtra affichant le logo SVG avec un dégradé linéaire dessiné sur la page Web en utilisant les mesures mentionnées dans le script ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!