Video Screencasts 2025, Tháng Chín

Cảm ơn vì đã theo dõi tất cả mọi người, nó có ý nghĩa với tôi và trang web này. Bài đăng trên blog này là một danh sách khổng lồ các tài nguyên cho mọi thứ mà chúng tôi đã đề cập trong loạt bài này "

Khi bạn sử dụng nội tuyến, tất cả các phần tử đều nằm trong DOM, giống như s và s và bất kỳ phần tử HTML nào khác. Nếu bạn có SVG như: và bạn làm: var direct = "

Trong video truyền hình này, chúng tôi tìm hiểu bài viết của Léonie Watson về tất cả các SVG có thể truy cập được và về cơ bản đi qua từng điểm một. Tôi thích đó là điểm đầu tiên "

Chúng tôi đã dành nhiều thời gian để nói về việc sử dụng nội tuyến và phần tử. Bạn có thể xây dựng một hệ thống biểu tượng với đầy đủ các lợi thế. Bạn có thể tạo "

Có rất nhiều điều bạn có thể làm với SVG mà không cần bất kỳ phần mềm nào. Giả sử bạn có một nguồn ảnh SVG trực tuyến tốt, bạn có thể sử dụng chúng trực tiếp. Nhưng"

JavaScript là cách cuối cùng chúng ta sẽ đề cập đến việc tạo hoạt ảnh cho SVG. Chúng tôi đã xem xét CSS, cái này rất tuyệt và khá thoải mái, nhưng nó không thể làm được nhiều SVG "

Khái niệm về clipping và mask khá đơn giản. Ẩn các phần nhất định của các phần tử và hiển thị những phần khác. Sự khác biệt thực tế giữa chúng khá đơn giản "

Có lẽ bạn đã nghe nói về bộ lọc CSS? Bạn có thể áp dụng chúng cho bất kỳ phần tử nào từ CSS, như: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Có lẽ không có trường hợp sử dụng nào quá lớn cho việc này, ngoài điều hiển nhiên: bạn cần một đồ họa raster trong số những thứ khác trong một thiết kế SVG lớn hơn. "

Có thể đến một ngày bạn ước một hình ảnh bạn có là SVG, nhưng bạn chỉ có nó ở dạng raster, như GIF, JPG.webp hoặc PNG. Trong video này, chúng ta xem xét một ví dụ "

Một kỹ thuật hoạt hình SVG nhỏ phổ biến là vẽ đường dẫn. Nếu bạn không thể hình dung nó, đây là một bộ sưu tập hàng triệu ví dụ mà tôi đã tạo. Về cơ bản là "

Có một phần tử trong SVG. Không có gì ngạc nhiên ở đây: đó là việc đưa văn bản vào SVG. Không phải phác thảo hình dạng của các chữ cái (mặc dù bạn cũng có thể làm điều đó) nhưng "

Đây là một điều hơi bí truyền, tôi chỉ cần tự làm một lần và thấy nó khó hiểu nên tôi nghĩ mình sẽ làm cả một video về nó. Vấn đề là, "

Video này đã bị xóa. Tôi sẽ quay lại nó vào một ngày không xa. Nếu bạn đang đọc cái này mà tôi vẫn chưa làm được, vui lòng liên hệ với tôi và gửi lỗi cho tôi "

Mẹo này chỉ áp dụng nếu bạn có Adobe Illustrator CC (Creative Cloud). Tôi đã xác nhận rằng nó hoạt động ở đó, hoặc thậm chí mới hơn CC 2014. Nó đơn giản nhất có thể "

Mặc dù việc tạo hoạt ảnh SVG bằng CSS có thể thoải mái hơn đối với người dùng giao diện người dùng trung bình, nhưng SVG có một cách khác để tạo hoạt ảnh ngay trong SVG "

Khi bạn sử dụng SVG nội tuyến, tất cả mã SVG đó đều nằm ngay trong HTML và do đó trong DOM. Bạn có thể tạo kiểu cho chúng giống như cách bạn làm, hoặc bất kỳ HTML nào khác "

Chúng tôi đã biết rằng một hạn chế của việc sử dụng để chèn một chút SVG là bạn không thể viết các bộ chọn CSS phức hợp ảnh hưởng đến nó. Ví dụ: That "

Thuật ngữ "công cụ xây dựng" có thể đáng sợ. Nó gợi nhớ đến các công cụ dòng lệnh ưa thích yêu cầu cấu hình và các phụ thuộc hệ thống kỳ lạ bị hỏng khi bạn "

SVG nội tuyến có thể được "tạo kiểu" theo nghĩa là nó đã có các nét điền và nét vẽ và không có nghĩa là bạn đặt nó vào trang thứ hai. Điều đó thật tuyệt vời và hoàn toàn "

Các trang web chụp ảnh chứng khoán luôn có cách lọc kết quả tìm kiếm theo "vector". Và hãy nhớ, bất kể bạn nhận được định dạng nào khi tải xuống nội dung nào đó "

Chúng tôi đã biết rằng các công cụ xây dựng đặc biệt tuyệt vời cho các tác vụ như biến một thư mục chứa đầy SVG thành một khối SVG defs. Như mọi khi trong trường hợp "

Chúng tôi chắc chắn có thể trở nên nhạy bén hơn một chút với các công cụ xây dựng của mình. Tại thời điểm đăng bài này, con áp phích của các công cụ xây dựng là Grunt. Có những đối thủ cạnh tranh, "

Khi chúng ta có thứ mà chúng ta gọi là "khối định nghĩa" SVG - đoạn SVG định nghĩa tất cả những thứ chúng ta muốn vẽ sau này - chúng ta đặt nó ở đâu? Vì thế"

Yếu tố kết hợp với toàn bộ ý tưởng về hệ thống biểu tượng SVG nội tuyến. Chúng tôi đã học được rằng một cách dễ dàng để làm điều đó là đặt mọi thứ bạn định vẽ sau này "

Đặt khối định nghĩa SVG đó ở đầu tài liệu chắc chắn hoạt động. Nó cũng có một số lợi thế, chẳng hạn như thực tế là không cần thực hiện yêu cầu HTTP "

SVG có một phần tử rất thú vị và mạnh mẽ được gọi là. Nó khá đơn giản trong khái niệm. Nó tìm thấy một bit khác của mã SVG, được tham chiếu bởi ID và sao chép nó qua "

Chúng tôi đã đề cập đến "SVG nội tuyến" - tức là bỏ cú pháp SVG vào HTML. Bạn cũng có thể sử dụng SVG nội tuyến đó ở những nơi khác, chẳng hạn như trong một hoặc "

Hãy nhớ rằng bất kỳ vector nào bạn có thể nhận được vào SVG. Phần mềm của Adobe là rất tốt trong việc này. Có thể có nội dung vectơ trong PDF - chỉ cần mở PDF và bạn sẽ "

Dự án Danh từ là một nơi (rất) tuyệt vời để lấy SVG. Hãy để chúng tôi đếm các cách Theo nghĩa đen, mọi thứ trong SVG và thực sự diễn ra theo cách đó. Chúng là "