SVG cơ bản

Trần Đức Lĩnh

Bài viết liên quan Tìm hiểu đồ họa Website.

Công cụ hỗ trợ: AI, Figma, ...

Tổng quan SVG.

Không như những bức ảnh thông thường như JPEG, PNG, GIF hoặc vẽ đồ họa bằng canvas. Chúng thường tạo nên từ các bitmap, khi phóng lớn ra, ảnh sẽ bị vỡ đi và không thể nhìn rõ được nữa. Chất lượng ảnh sẽ giảm đi, đó là nhược điểm.

Trong khi đó SVG được vẽ bằng các vector (định dạng XML), có thể chỉnh sửa qua những công cụ đồ họa mà không động chạm đến mã nguồn bên trong. Việc in ấn hoặc hiển thị chi tiết trên nhiều thiết bị không bao giờ trở ngại.

SVG là một phần của DOM, có thể truy xuất thông qua thẻ <img> như một bức ảnh bình thường.

<img src="file.svg" width="200px" height="200px" />

<svg width='150' height='150'>
    <circle cx='50' cy='50' r='40' stroke='#000' stroke-width='4' fill='f00'/>
</svg>

SVG Shapes

Các thẻ định dạng được sử dụng trong SVG.

  • Rectangle <rect>.
  • Circle <circle>.
  • Ellipse <ellipse>.
  • Line <line>.
  • Polyline <polyline>.
  • Poligon <polygon>.
  • Path <path>.

Các thẻ này luôn luôn nằm trong thẻ <svg> bao bọc.

rect

<svg width="200" height="200">
    <rect x="10" y="20" width="150" height="100" style="
    fill:aquamarine;
    fill-opacity:0.6;
    stroke:red;
    stroke-width:5;
    stroke-opacity:0.6;
    opacity:0.9;
    "/>
</svg>
  • <rect> : Tạo hình chữ nhật.

    • x : Bắt đầu từ tọa độ x.
    • y : Bắt đầu từ tọa độ y.
    • width : Chiều rộng.
    • height : Chiều dài.
    • rx : Độ cong cạnh ngang tọa độ x.
    • ry : Độ cong cạnh dọc tọa độ y.
    • style : Chứa các thuộc tính.

      • fill : Phủ màu.
      • stroke : Tạo viền.
      • fill-opacity : Độ mờ phủ màu.
      • stroke-opacity : Độ mờ tạo viền.
      • opacity : Độ mờ toàn bộ rect.

circle

<svg width="200" height="200">
    <circle cx="80" cy="100" r="50" fill="blue" style="
    stroke-width: 4;
    stroke: chocolate;
    "/>
</svg>

Style trên thẻ svg không nhất thiết phải chứa toàn bộ các thuộc tính màu sắc, độ dày của stroke...

  • circle : Tạo hình tròn.

    • cx : Bắt đầu từ tọa độ x.
    • cy : Bắt đầu từu tọa độ y.
    • r : Tích cỡ vòng tròn.

ellipse

Ellipse cũng tương tự như Circle. Có 2 thuộc tính rxry để xác định độ cong của hình.

<svg width="200" height="200">
    <ellipse cx="80" cy="100" rx="60" ry="40" style="fill:red;"/>
</svg>
  • ellipse : Tạo hình elip.

    • rx : Điều chỉnh kéo giãn tọa độ x.
    • ry : Điều chỉnh kéo giãn tọa độ y.

line

<svg width="200" height="200">
    <line x1="10" y1="10"
            x2="150" y2="150"
            stroke="red"
            stroke-width="4"/>
</svg>
  • line : Tạo đường thẳng.

    • x1 : Tọa độ x bắt đầu.
    • y1 : Tọa độ y bắt đầu.
    • x2 : Tọa độ x kết thúc.
    • y2 : Tọa độ y kết thúc.

polygon

Polygon tạo ra các đường thẳng nối tiếp nhau ít nhất là 3 điểm.

<svg width="200" height="200">
    <polygon points="50,50 100,150 100,100, 10,100 150,10" style="fill:#C4E538;stroke:#1B1464;stroke-width:4"/>
</svg>
  • polygon : Tạo các đường thẳng nối tiếp nhau.

    • points : Tạo các điểm tọa độ x,y nối liền nhau theo từng cặp, mỗi cặp nối liền nhau bởi dấu phẩy, điểm cuối sẽ tự động ghép liền với điểm đầu để tạo thành nét khép kín.

(Còn nữa...)