SVG trong HTML

  • Nguyễn Lê Điệp
  • 21-01-2017
  • 269
  • 0
  • 2
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    SVG là gì?

    SVG là viết tắt của từ Scalable Vector Graphics. SVG được dùng để vẽ đồ họa cho trang Web. W3C khuyên bạn nên sử SVG.

    Phần tử SVG

    SVG trong HTML là một phần tử chính dùng để vẻ đồ họa. SVG thường dùng để vẽ đường, hộp, hình tròn, văn bản và hình ảnh.

    Trình duyệt hỗ trợ

    Với các trình duyệt dường như đều hỗ trợ cho phần đồ họa svg này
    Chrome Edge Firefox Safari Opera

    Hình tròn SVG

    <svg width="200" height="200">
      <circle cx="100" cy="100" r="90" stroke="red" stroke-width="4" fill="pink" />
    </svg>
    Xem ví dụ

    Hình chữ nhật

    <svg width="400" height="150">
      <rect width="400" height="150" style="fill:pink;stroke-width:10;stroke:red" />
    </svg>
    Xem ví dụ

    Hình chữ nhật bo tròn

    <svg width="400" height="150">
      <rect x="50" y="20" rx="20" ry="20" width="150" height="120" style="fill:pink;stroke:red;stroke-width:5;" />
    </svg>
    Xem ví dụ

    Hình ngôi sao

    <svg width="300" height="200">
      <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:yellow;stroke:red;stroke-width:2;fill-rule:evenodd;" />
    </svg>
    Xem ví dụ

    Hình logo

    <svg height="130" width="500">
      <defs>
        <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>
      <ellipse cx="120" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      <text fill="#bde2ff" font-size="45" font-family="tahoma" x="50" y="86">Kennis</text>
    </svg>
    Xem ví dụ

    Sự khác nhau giữa SVG và Canvas

    - SVG là một ngôn ngữ dùng để làm đồ họa 2D trong XML. Còn Canvas dùng để vẽ đồ họa 2D với các sự kiện trong JavaScript.

    - SVG phát triển dựa trên trên ngôn ngữ XML, có nghĩa là mọi phần tử có sẵn trong SVG DOM. Bạn có thể kèm thêm các sự kiện xử lý của JavaScript.

    - Trong SVG, mỗi hình vẽ được lưu lại như một đối tượng. Nếu các thuộc tính của một đối tượng SVG được thay đổi, trình duyệt có thể tự động tải lại hình dạng của nó.

    - Canvas là dùng độ phân giải pixel đồng thời nó sẽ vẽ lại từ đầu khi trình duyệt được tải lại. Nếu một vị trí của nó bị thay đổi thì nó sẽ được vẽ lại hoàn toàn cho một đối tượng.

    So sánh giữa SVG và Canvas

    Bên dưới là bảng so sánh sự khác biệt giữa SVG và Canvas
    SVG Canvas
    Có tính độc lập không phụ thuộc vào độ phân giải Có tính phụ thuộc vào độ phân giải
    Hỗ trợ xử lý các sự kiện Không hỗ trợ xử lý các sự kiện
    Phù hợp cho các ứng dụng có khu vực vẽ lớn Khả năng vẽ bằng văn bản còn hạng hẹp
    Vẽ phức tạp và tốc độ tải chậm Có thể lưu lại ảnh của kết quả với đuôi .png hoặc .jpg
    Không phù hợp với các ứng dụng trò chơi Thích hợp cho các trò chơi bằng đồ họa chuyên sâu
    Chúc các bạn học tốt!cheeky
    Từ khóa:

    SVG trong HTML

    SVG trong HTML

    SVG trong HTML

    SVG trong HTML
    SVG trong HTML
    2 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    40
    - Hôm qua:
    963
    - Tuần này:
    5.125
    - Tuần trước:
    4.456
    - Tháng này:
    19.748
    - Tháng trước:
    21.317
    - Năm này:
    112.437
    - Năm trước:
    17.373
    - Tổng cộng:
    129.810