Làm thế nào để vẽ Logo SVG trong HTML5?

SVG là viết tắt của Scalable Vector Graphics và là ngôn ngữ để mô tả các ứng dụng đồ họa và đồ họa 2D trong XML và XML sau đó được trình xem SVG hiển thị. Hầu hết các trình duyệt web có thể hiển thị SVG giống như chúng có thể hiển thị PNG, GIF và JPG.

Bạn có thể vẽ các hình dạng như hình tròn, hình chữ nhật, đường thẳng, v.v. bằng cách sử dụng SVG trong HTML5 một cách dễ dàng. Hãy xem một ví dụ để vẽ biểu trưng SVG. Đối với điều đó, chúng tôi sẽ tạo một gradient tuyến tính:

Ví dụ

Bạn có thể thử chạy mã sau để vẽ biểu trưng SVG -

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

Làm thế nào để vẽ Logo SVG trong HTML5?

Ví dụ

Đầu ra