Thẻ svg nhúng hình và chữ trong HTML

Thẻ svg nhúng hình và chữ trong HTML

Thẻ svg nhúng hình và chữ trong HTML

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Thẻ svg nhúng hình và chữ trong HTML</title>
</head>
<body>
<h1>Thẻ svg nhúng hình và chữ trong HTML</h1>
<!--Nếu trình duyệt không hỗ trợ SVG nội tuyến thì hiện thông báo rất tiếc-->
<!--Chiều rộng svg: 500px, chiều cao svg: 130px-->
<svg width="500" height="130">
  <defs>
    <!--Tạo màu nền để gắn vào fill của ellipse-->
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!--Tạo hình ellipse, gắn màu nền từ id grad1-->
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <!--Chữ màu trắng, left:50px, top:86px, kích thước chữ 45px, font Verdana-->
  <text fill="#ffffff" font-size="45" font-family="Verdana"
  x="50" y="86">SVG</text>
  Rất tiếc, trình duyệt của bạn không hỗ trợ SVG nội tuyến.
</svg>
</body>
</html>
Thẻ svg nhúng hình và chữ trong HTML nằm trong bài viết Thẻ svg trong HTML