Học SVG - Kiso

Hướng dẫn chuyển màu radial trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ <svg> như sau: <svg width="300" height="200" style="background: cyan"></svg> Sau đó, mình sẽ tạo hình oval bằng thẻ <ellipse/> và di chuyển hình đến vị trí trung tâm: <svg width="300" height="200" style="background: cyan"> <ellipse cx='150' cy='100' rx='100' ry='50'/> </svg> Tiếp theo, mình sẽ tạo hiệu ứng......

Hướng dẫn chuyển màu linear trong SVG

Hướng dẫn làm nhòe đối tượng trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ <svg> như sau: <svg width="400" height="200" style="background: #00A389"></svg> Sau đó, mình sẽ tạo hình chữ bằng thẻ <rect/> và di chuyển hình đến vị trí trung tâm: <svg width="400" height="200" style="background: #00A389"> <rect x='100' y='50' width='200' height='100' fill='#FFD600'/> </svg> Tiếp theo, mình sẽ tạo hiệu......

Một số kiểu đường viền được tạo bởi SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width="200" height="200" style="background: #B71C1C"></svg> Sau đó, mình sẽ tạo các đường kẻ bằng thẻ path, lưu ý là M xuất hiện ở tọa độ điểm đầu tiên: <svg width="200" height="200" style="background: #B71C1C"> <path stroke='white' d='M20,20 180,20'/> <path stroke='white' stroke-width='2' d='M20,40 180,40'/>......

Tạo nhanh một dòng chữ bằng SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: #B71C1C'></svg> Sau đó, mình sẽ gõ nội dung hiện thị bên trong thẻ text, với tọa độ x = 50, y = 24 và kích cỡ chữ 24pt như bên dưới: <svg width='200' height='200' style='background: #B71C1C'> <text x='50'......

Hướng dẫn vẽ ngôi sao bằng SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='300' height='200' style='background: #B71C1C'></svg> Tiếp theo, mình sẽ tạo hình ngôi sao bằng thẻ polygon, tại điểm bắt đầu là x = 150, y = 30: <svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165' stroke='#FFD600'/> </svg> <svg width='300' height='200' style='background: #B71C1C'>......

Làm quen với thẻ Line trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ <svg> như sau: <svg width='200' height='100' style='background: cyan'></svg> Sau đó, mình sẽ vẽ các đoạn thẳng bằng thẻ <line/>, với điểm kết thúc của đoạn thẳng trước là điểm bắt đầu của đoạn thẳng tiếp theo: <svg width='200' height='100' style='background: cyan'> <line x1='10' y1='5' x2='50'......

Làm quen với thẻ Polygon trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình đa giác bằng thẻ polygon, với điểm bắt đầu tại điểm x = 65, y = 50 và đi đến các điểm còn lại: <svg width='200' height='200' style='background: cyan'> <polygon points='65,50......

Vẽ hình ellipse trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình ellipse với bán kính trục tung là 40px và bán kính trục hoành là 80px: <svg width='300' height='200' style='background: cyan'> <ellipse rx='80' ry='40' /> </svg> Hình ellipse có mặc định màu đen......

Vẽ hình tròn trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình tròn bằng circle, với bán kính là 40px: <svg width='300' height='200' style='background: cyan'> <circle r='40' /> </svg> Hình tròn có mặc định màu đen ở góc trên bên trái và tâm đường......

Vẽ hình chữ nhật trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình chữ nhật bằng rect, với chiều rộng 200px, chiều cao 100px: <svg width='300' height='200' style='background: cyan'> <rect width='200' height='100' /> </svg> Hình chữ nhật có mặc định màu đen ở góc trên......

Convert từ SVG sang Icon Font như thế nào?

Chào các bạn! Đã bao giờ các bạn gặp phải trường hợp trong design có 1 icon khác lạ mà icon đó không hề có trong library icon font mà bạn đang dùng chưa? Có lẽ là không ít lần rồi nhỉ? Vậy bạn cần làm thế nào trong trường hợp này? Có lẽ đa......