#svg

How to Build a Scalable SVG Icon System for Your Web App

SVG tỏ ưu thế hơn icon fonts hay bitmap nhờ khả năng co giãn và tùy chỉnh. Bài hướng dẫn kỹ thuật sử dụng phương pháp sprite với symbol và use elements để tránh trùng lặp markup, kèm ví dụ React triển khai accessibility với aria-label hoặc aria-hidden. Công cụ svg-sprite tự động tạo sprite từ thư mục nguồn, tối ưu SVG trước khi thêm vào sprite giúp giảm kích thước file. Điều đáng học là sử dụng bộ icon đồng nhất về phong cách và tránh lỗi trùng lặp tên hoặc thiếu thuộc tính accessibility.

Lập trình viên nên đọc bài này để học cách xây dựng hệ thống biểu tượng SVG hiệu quả, tránh rắc rối về hiệu suất, bảo trì và tính khả dụng khi ứng dụng phát triển lớn hơn.

JavaScript Motif Series

JavaScript Motif Series 3d button. In this post, an SVG 3d button is demonstrated. <!DOCTYPE> <html> <head></head> <body> <div class="javascript_css"></div> <script> function threeD_button() { …

I Turned My GitHub Profile Into a Cyberpunk Console With a City Built From My Contributions

Tác giả đã tạo profile GitHub với giao diện cyberpunk độc đáo, biến lịch sử contributions thành một thành phố ảo động. Sử dụng JavaScript và CSS tùy biến, anh ấy xây dựng console hoạt động với terminal, weather widget và bản đồ thành phố do chính commits của mình tạo thành. Mặc dù không cần thiết cho chức năng thực tế, dự án này cho thấy sức mạnh của tùy biến GitHub Actions và SVG animation. Nếu bạn muốn tạo trải nghiệm profile khác biệt, bài viết này cung cấp nguồn cảm hứng và code mẫu để bắt đầu.

Hướng dẫn biến trang GitHub thành bảng điều khiển cyberpunk độc đáo với kiến trúc từ các đóng góp mã của bạn.

WebKit Igalia Periodical #78

WebKit vừa phát hành phiên bản ổn định WebKitGTK 2.54.0 và WPE WebKit 2.54.0 với Skia-based compositor thay thế TextureMapper. API nhúng WPEPlatform đã đạt ổn định với tài liệu hướng dẫn và hướng di chuyển từ libwpe cũ. Các bản vá trong tuần này tập trung vào sửa lỗi Sysprof trace timing, CSS filter/backdrop-filter trên phần tử bị biến đổi, và clipping rasterization tile trong backing store Skia. Hiệu năng của compositor mới được cải thiện đáng kể với xử lý damage handling chính xác hơn.

Bài viết cập nhật những sửa lỗi và cải tiến quan trọng trong WebKit cùng với việc ra mắt phiên bản ổn định 2.54.0 có compositor dựa trên Skia mới mang lại hiệu năng vượt trội.

WebKit Igalia Periodical #77

Trong tuần từ 7-14/9, WebKit đã có các bản sửa đồ họa và rendering quan trọng, bao gồm việc dọn dẹp PNG decoder loại bỏ hỗ trợ libpng cũ hơn phiên bản 1.5.0. Đội ngũ sửa lỗi assertion failure trong Layer-Based SVG Engine (LBSE) liên quan đến scrolling, filters và compositing, đồng thời khắc phục việc phân lớp không chính xác cho layer có clipping/masking. Các sửa quan trọng khác bao gồm giảm unnecessary repaints cho CSS-filtered composited layers trên Skia compositor và fix white noise artifacts trên Intel Arc với i915 driver. Bài viết còn có blog cộng đồng về sử dụng WPE Platform API trên Raspberry Pi với branch mới nhất của WebKit main.

Lập trình viên nên đọc bài này để cập nhật các bản vá và cải tiến quan trọng trong WebKit liên quan đến đồ họa, rendering và hiệu suất.

Charts with Plotto

Plotto là thư viện charting 100% bằng Elixir không sử dụng NIF hay phụ thuộc bên ngoài. Bài viết hướng dẫn tích hợp Plotto vào Phoenix LiveView để tạo biểu đồ SVG tương tác. Thư viện này sử dụng Elixir thuần túy không cần liên hệ với bên ngoài (no external dependencies). Bạn sẽ học cách tạo biểu đồ động trong dashboard LiveView. Nếu bạn làm việc với Elixir và Phoenix, Plotto là lựa chọn đáng cân nhắc cho visualization.

Plotto giúp lập trình viên thêm biểu đồ SVG tương tác vào dashboard Phoenix LiveView mà không cần phụ thuộc bên ngoài.

I ditched my $30/month Illustrator subscription for Inkscape, and my icon workflows got faster

This free tool works just as well.

Replacing Dashicons in the admin bar and menu

Một bản vá đang được phát triển từ tháng 6 để thay thế Dashicons trong thanh admin và thanh bên bằng WordPress icons, sử dụng hàm wp_get_icon() được giới thiệu trong WordPress 7.1. Sự thay đổi này rất đáng chú ý vì nó thay đổi trực quan giao diện quản trị WordPress mà hàng triệu người dùng nhìn thấy mỗi ngày. Việc chuyển sang wp_get_icon() không chỉ giúp mã nguồn gọn hơn mà còn cho phép WordPress dễ dàng quản lý và tùy biến hệ thống icon trong tương lai. Đây là thay đổi quan trọng với bất kỳ nhà phát triển nào làm việc trên giao diện quản trị WordPress.

Bài viết này giúp bạn hiểu về sự thay đổi Dashicons bằng WordPress icons trong admin bar và menu sử dụng hàm wp_get_icon().

When the CMS Give You the Wrong Image: A Frontend Developer’s Decision Framework

A decision framework helps frontend developers diagnose why an image doesn't fit a component: resolution shortage, composition mismatch, delivery inefficiency, or encoding bloat are four distinct problems requiring different fixes. The recommended workflow prioritizes finding a better original source before compressing or resizing, maintains a separate original-master-derivative asset hierarchy, and treats images as build pipeline inputs rather than static files. It covers when AI upscaling is reasonable (decorative photography) versus risky (screenshots, diagrams, logos with text or factual content), why vector formats like SVG suit logos better than raster upscaling, and how responsive image techniques (srcset, picture element) should generate delivery variants from a high-quality master rather than serving one oversized file to everyone.

SVG sprites: improve performance (and keep configurability)

Bài viết so sánh hiệu suất giữa SVG sprite và inline SVG trong thư viện Rails Icons trên bộ dữ liệu 1.000 biểu tượng. Khi dùng sprite, lượng HTML giảm từ 1.000 bản inline xuống khoảng 140 bản, tương đương 86% ít hơn vì tất cả icon được gom vào một file SVG và được tham chiếu qua thẻ <use>. Kết quả là thời gian tải trang giảm 34%, cho thấy trang web phản hồi nhanh hơn rõ rệt. Ngoài ra, sprite vẫn cho phép cấu hình màu, kích thước hoặc hiệu ứng qua CSS hoặc JavaScript mà không mất đi tính linh hoạt của inline SVG. Điều này cho thấy việc áp dụng SVG sprite là cách hiệu quả để giảm payload và cải thiện tốc độ load mà vẫn giữ được khả năng tùy chỉnh cho các biểu tượng trong ứng dụng Rails.

Bài viết này chứng minh rõ ràng cách SVG sprites tối ưu hiệu suất trang web mà vẫn giữ được khả năng cấu hình linh hoạt.

Build a Vite Plugin to Catch Broken SVG Assets Before Production

A step-by-step tutorial shows how to build a custom Vite plugin that scans a project's SVG assets, enforces rules like requiring a viewBox, banning script and foreignObject elements, and staying under a size budget, then blocks builds and warns during development when assets violate those rules. It covers structuring the plugin, hooking into buildStart and configureServer, making it configurable, extracting a reusable validation engine, and wiring the same checks into CI, framing the approach as turning tribal knowledge about asset requirements into an executable build contract.

Timing Charts: A Blueprint For SMIL Animations — Smashing Magazine

SMIL là phương pháp thường bị bỏ qua để animate SVG, hoạt động trong thẻ <svg> và có thể animate mọi thứ trong SVG không cần JavaScript.

Bài viết này giúp lập trình viên khám phá SMIL - phương pháp hiệu quả để tạo animation SVG mà không cần JavaScript.

Hands-on with the WordPress 7.1 Icon Registration API

WordPress 7.1 bổ sung API đăng ký icon tùy chỉnh, cho phép dễ dàng quản lý bộ sưu tập icon và hiển thị SVG thông qua hướng dẫn thực hành chi tiết.

Lập trình viên phát triển WordPress nên đọc bài này để khám phá cách sử dụng API mới cho đăng ký và hiển thị các icon tùy chỉnh trong WordPress 7.1, giúp tối ưu hóa thiết kế UI và mở rộng khả năng cá nhân hóa plugin cho người dùng.