HTML – Giới thiệu về Scalable Vector Graphics (SVG)

SVG - gradientSVG là một công nghệ mới dựa trên định dạng XML cho phép tạo các đối tượng đồ họa phức tạp để hiển thị trên trình duyệt. Được bắt đầu phát triển từ 1999, hiện tại phiên bản thứ hai của SVG đã được tổ chức W3C chính thức ra mắt vào tháng 8/2011.

Các ảnh SVG được vẽ dưới dạng vector thông qua XML nên chúng có thể dễ dàng được chỉnh sửa bởi bất kì trình soạn thảo văn bản nào. Hơn nữa việc lưu trữ, truyền tải cũng dễ dàng và không cần phải quan tâm đến việc chất lượng ảnh.

Để tìm hiểu về SVG, bạn có thể theo hướng dẫn của trang w3schools tại SVG TutorialSVG Reference.

Trong bài viết này, tôi chỉ giới thiệu một số ví dụ đơn giản được lấy từ w3schools.

Cirle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <circle cx="90" cy="200" r="60" stroke="black" stroke-width="2" fill="red" style="opacity:0.5"/>
 <circle cx="150" cy="200" r="60" stroke="black" stroke-width="2" fill="green" style="opacity:0.5"/>
 <circle cx="120" cy="250" r="60" stroke-width="2" style="fill:blue;stroke:black;opacity:0.5" />
</svg>

SVG - three cicles

Polygon

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <polygon points="100,10 40,180 190,60 10,60 160,180"
 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG -  five-pointed star

Text

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

SVG - text

Gradient

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

SVG - gradient
YinYang’s Blog

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s