Cách vẽ logo SVG trong HTML5

SVG cho phép vẽ các hình cơ bản (tròn, chữ nhật, đường) và kết hợp gradient để tạo logo đẹp mắt. Ví dụ dưới đây tạo logo với gradient tuyến tính và chữ.

Ví dụ

Mã sau vẽ một logo SVG đơn giản:

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

Điểm chính: <defs> định nghĩa gradient, fill="url(#lgrad)" áp dụng gradient cho elip, <text> thêm chữ lên hình.