BestHub
Sign in
Tagged articles
91 articles
Page 1 of 1
Machine Learning Algorithms & Natural Language Processing
Machine Learning Algorithms & Natural Language Processing
Mar 30, 2026 · Artificial Intelligence

Editable AI-Generated Research Figures: Introducing AutoFigure-Edit from Westlake University

The article presents AutoFigure-Edit, an open‑source AI system that turns long‑form scientific text into fully editable SVG figures, solves the uneditable‑image problem of existing AIGC tools, and demonstrates superior performance on the FigureBench benchmark and real‑user studies.

AIAutoFigureSVG
0 likes · 11 min read
Editable AI-Generated Research Figures: Introducing AutoFigure-Edit from Westlake University
Design Hub
Design Hub
Mar 4, 2026 · Artificial Intelligence

Why a16z Invested $8.3M in AI‑Generated SVGs: A Deep Dive into QuiverAI

QuiverAI secured an $8.3 million seed round from a16z, built the Arrow‑1.0 model that tops the Design Arena SVG leaderboard with an Elo of 1583, and sparked a market analysis that examines SVG adoption, AI agent economics, competitive players, and practical takeaways for developers, product managers, and designers.

AIDesignToolsMarketAnalysis
0 likes · 13 min read
Why a16z Invested $8.3M in AI‑Generated SVGs: A Deep Dive into QuiverAI
Node.js Tech Stack
Node.js Tech Stack
Feb 20, 2026 · Frontend Development

Is Frontend Dead Again? Gemini 3.1 Pro’s Leap in Reasoning and Code Generation

Google’s Gemini 3.1 Pro dramatically improves core reasoning scores (77.1% on ARC‑AGI‑2, 80.6% on Swe‑bench) and can generate interactive SVG, complex data‑driven visualizations, and creative‑coding layouts, prompting a reassessment of which front‑end tasks AI can replace and which still require architectural expertise.

AI code generationBenchmarkGemini 3.1 Pro
0 likes · 6 min read
Is Frontend Dead Again? Gemini 3.1 Pro’s Leap in Reasoning and Code Generation
Su San Talks Tech
Su San Talks Tech
Jan 12, 2026 · Artificial Intelligence

How to Supercharge Diagram Creation with AI: From Text Prompts to draw.io

Learn how to rapidly generate high‑quality flowcharts, architecture diagrams, and SVG graphics in under three minutes using AI text‑to‑image tools like Claude‑3.7‑sonnet, PlantUML, Mermaid, Graphviz, Obsidian Canvas, and draw.io, with step‑by‑step prompts, configuration tips, and editing tricks.

AIDiagramDraw.io
0 likes · 13 min read
How to Supercharge Diagram Creation with AI: From Text Prompts to draw.io
Wuming AI
Wuming AI
Dec 18, 2025 · Artificial Intelligence

How to Generate Professional Architecture Diagrams with Gemini 3 Pro and DrawIO

This guide walks through four practical ways to use Gemini 3 Pro together with DrawIO, SVG, and AI coding IDEs to automatically create, edit, and refine high‑quality architecture diagrams, complete with prompt examples, installation steps, and post‑generation adjustments.

AI diagrammingGemini 3 ProPrompt engineering
0 likes · 5 min read
How to Generate Professional Architecture Diagrams with Gemini 3 Pro and DrawIO
Sohu Tech Products
Sohu Tech Products
May 21, 2025 · Mobile Development

How to Render Server‑Delivered SVGs on Android: Libraries, Code & Pitfalls

Android only supports Vector drawables, but many apps need to display server‑delivered SVGs; this article compares several approaches—including AndroidSVG, Glide integration, PathView, custom SvgDrawable, and IconFont—detailing setup, code snippets, rendering pipelines, animation limits, and practical recommendations for mobile developers.

AndroidGlidePathView
0 likes · 29 min read
How to Render Server‑Delivered SVGs on Android: Libraries, Code & Pitfalls
Sohu Tech Products
Sohu Tech Products
May 14, 2025 · Mobile Development

How to Render SVG on Android: AndroidSVG, Glide, PathView and More

This article explains multiple ways to display SVG graphics on Android, covering the AndroidSVG library, direct SVG rendering with SVGImageView, Glide integration for remote SVGs, the PathView animation library, custom drawable attempts, and iconfont usage, while comparing their pros and cons.

AndroidGlidePathView
0 likes · 30 min read
How to Render SVG on Android: AndroidSVG, Glide, PathView and More
Full-Stack Cultivation Path
Full-Stack Cultivation Path
May 14, 2025 · Frontend Development

Creating Adaptive Dot Progress Bars with CSS Gradients and SVG

The article shows how to replace numerous HTML elements with a single CSS‑gradient background tile to build a fully responsive progress bar composed of small dots, explains the calculation of tile size using CSS variables, adds current progress with a linear‑gradient overlay, and offers an SVG alternative that can also be applied to custom range sliders.

CSSGradientsHTML
0 likes · 10 min read
Creating Adaptive Dot Progress Bars with CSS Gradients and SVG
Sohu Tech Products
Sohu Tech Products
Apr 29, 2025 · Mobile Development

Understanding Android VectorDrawable and AnimatedVectorDrawable: Usage and Source Code Analysis

The article explains Android’s VectorDrawable format for SVG‑like scalable graphics, details its XML schema, shows how to create static vectors, gradients, and clip‑paths, then examines the underlying source‑code flow, and finally describes AnimatedVectorDrawable’s property‑based animations, inflation process, and runtime execution.

AndroidAnimatedVectorDrawableGraphics
0 likes · 48 min read
Understanding Android VectorDrawable and AnimatedVectorDrawable: Usage and Source Code Analysis
Sohu Tech Products
Sohu Tech Products
Jan 15, 2025 · Frontend Development

Mastering SVG: From Basics to Advanced Animations in Web Development

This comprehensive guide explains vector graphics fundamentals, the advantages of SVG, common file formats, basic shapes, path commands, text handling, gradients, image embedding, animation elements, JavaScript and CSS interactivity, and best practices for integrating SVG into modern web pages.

GraphicsSVGWeb Development
0 likes · 32 min read
Mastering SVG: From Basics to Advanced Animations in Web Development
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jul 1, 2024 · Frontend Development

Design and Implementation of Front‑End Animations for NetEase Cloud Music 2023 Annual Listening Report

The 2023 NetEase Cloud Music Annual Listening Report showcases a front‑end animation pipeline where the motion designer codes directly in React, using CSSTransition for page fades, CSS keyframes for text and particle effects, SVG masks for data visualisation, 3D perspective tricks, and extensive device testing to balance visual richness with performance.

3DFront-endParticle System
0 likes · 37 min read
Design and Implementation of Front‑End Animations for NetEase Cloud Music 2023 Annual Listening Report
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 9, 2024 · Frontend Development

Vue3 Admin Template Without UI‑Framework Dependency – Features, Layout, Routing, State Management, and SVG Icon Builder

This article presents a lightweight, UI‑framework‑free Vue3 admin template, detailing its visual style configuration, core layout, permission‑based routing, TypeScript‑based state handling, custom AJAX request wrapper, and an SVG icon bundler, along with code examples and package information.

Admin TemplateSVGState Management
0 likes · 11 min read
Vue3 Admin Template Without UI‑Framework Dependency – Features, Layout, Routing, State Management, and SVG Icon Builder
DaTaobao Tech
DaTaobao Tech
Feb 26, 2024 · Frontend Development

Implementing Tab Border Effects with SVG

To create a tab interface with connected borders, recessed rounded corners, and smooth scrolling transitions, the article explains abandoning CSS due to background‑cover problems and instead using SVG paths that map the four corner vertices, employ arc commands for inner curves, dynamically update coordinates during scroll, and discusses the resulting performance and scalability trade‑offs.

Border DesignCSSSVG
0 likes · 17 min read
Implementing Tab Border Effects with SVG
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Nov 3, 2023 · Frontend Development

Modern Frontend Insights: SVG, Code Standards, Next.js SQL, Vite, Node.js 21

This article surveys recent frontend developments, including detailed SVG rendering techniques, best‑practice code standards with ESLint, Prettier and Husky, emerging trends such as Next.js‑embedded SQL, Vite’s roadmap and Node.js 21’s Stream API upgrades, plus practical UX guidance for legacy browsers and a glimpse of a leading frontend team.

ESLintNext.jsSVG
0 likes · 3 min read
Modern Frontend Insights: SVG, Code Standards, Next.js SQL, Vite, Node.js 21
Goodme Frontend Team
Goodme Frontend Team
Sep 25, 2023 · Frontend Development

How We Built a Drag‑Drop Electronic Menu Builder with SVG & React

This article details the design and implementation of a customizable electronic menu system that evolved from static images to an H5‑based, SVG‑driven, React-powered solution, covering business requirements, technology selection, data binding, rendering, store isolation, and offline stability.

PWASVGfrontend
0 likes · 15 min read
How We Built a Drag‑Drop Electronic Menu Builder with SVG & React
Bilibili Tech
Bilibili Tech
Sep 12, 2023 · Frontend Development

Font2svg: Converting Fonts to SVG for Efficient Web Rendering

Font2svg converts large font glyphs into on‑demand SVG paths using Python’s freetype‑py and svgpathtools, dramatically shrinking download size, speeding page loads, and improving user experience, with CDN‑served SVGs, a lightweight front‑end injector, and graceful fallback, as demonstrated by a 98 % size reduction in a Bilibili case study.

Font RenderingPythonSVG
0 likes · 15 min read
Font2svg: Converting Fonts to SVG for Efficient Web Rendering
Yuewen Frontend Team
Yuewen Frontend Team
Jan 10, 2023 · Frontend Development

How to Build a Smooth Semi‑Circular Progress Bar with Canvas and SVG

This tutorial walks through creating a semi‑circular progress bar using both Canvas and SVG, covering preparation, drawing techniques, angle calculations, animation loops, anti‑aliasing optimizations, and dynamic updates, and compares the visual and performance differences between the two approaches.

CanvasSVGanimation
0 likes · 14 min read
How to Build a Smooth Semi‑Circular Progress Bar with Canvas and SVG
HomeTech
HomeTech
Dec 20, 2022 · Frontend Development

Design and Implementation of an Indoor Space Management System Using SVG and Vue

This article describes the architecture, functional modules, technology choices, and detailed implementation techniques—including coordinate definition, collision detection, zoom/drag handling, object selection, batch operations, alignment, and indoor positioning—of a Vue‑based indoor space management platform that visualizes workstations, meeting rooms, and assets on an interactive map.

SVGVuecollision detection
0 likes · 10 min read
Design and Implementation of an Indoor Space Management System Using SVG and Vue
Huolala Tech
Huolala Tech
Oct 25, 2022 · Frontend Development

One‑Click Web Area Screenshot: Using Clipboard API & DOM‑to‑Image

This article explains how to implement a one‑click precise screenshot feature in a web application by leveraging the Clipboard API, converting DOM elements to images via SVG foreignObject, handling styles and resources, and finally writing the image to the system clipboard.

CanvasSVGWeb API
0 likes · 11 min read
One‑Click Web Area Screenshot: Using Clipboard API & DOM‑to‑Image
DataFunSummit
DataFunSummit
Sep 27, 2022 · Frontend Development

Web Watermark Techniques: Visible, Dynamic, and Invisible Watermarks

This article explains various web watermark methods—including simple visible logos, full‑page overlays, dynamic canvas‑generated marks, SVG‑based text watermarks, and robust invisible (blind) watermarks—while covering implementation details, security considerations, and protection mechanisms such as Shadow DOM and MutationObserver.

CanvasSVGShadow DOM
0 likes · 16 min read
Web Watermark Techniques: Visible, Dynamic, and Invisible Watermarks
php Courses
php Courses
Aug 31, 2022 · Frontend Development

Integrating Alibaba SVG Icons into a Vue 3 Project

This tutorial walks through downloading SVG icons from Alibaba's icon library, extracting the iconfont.js file, importing it globally, creating a reusable Vue component, registering it, and finally using the SVG icons within a Vue 3 backend system built with Express, MySQL, TypeScript, and Pinia.

SVGTypeScriptVue
0 likes · 5 min read
Integrating Alibaba SVG Icons into a Vue 3 Project
Alipay Experience Technology
Alipay Experience Technology
Aug 26, 2022 · Frontend Development

Master Canvas & SVG Boolean Operations: Winding Rules, Bentley-Ottmann, Martinez Algorithm

This article explores the theory and implementation of Boolean operations on Canvas and SVG vector graphics, covering winding rules, the Bentley‑Ottmann line‑segment intersection algorithm, curve handling, segment annotation, and practical selection logic using the Martinez method, with code examples and visual illustrations.

SVGbentley-ottmannboolean operations
0 likes · 16 min read
Master Canvas & SVG Boolean Operations: Winding Rules, Bentley-Ottmann, Martinez Algorithm
ELab Team
ELab Team
Aug 18, 2022 · Frontend Development

How to Create Smooth Drag‑Slider Effects with SVG Bezier Curves

This article explains how to use SVG path commands and JavaScript to draw and animate Bézier curves for a fluid drag‑slider UI, covering background, curve theory, implementation steps, stroke‑dash techniques, offset‑path alternatives, and SMIL animation for interactive effects.

Bezier CurveCSSJavaScript
0 likes · 15 min read
How to Create Smooth Drag‑Slider Effects with SVG Bezier Curves
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 5, 2022 · Frontend Development

Liquid Flow Effects with SVG, CSS Masking, and Canvas – A Frontend Development Tutorial

This article demonstrates how to create dynamic liquid‑flow animations for static images using SVG filters (feTurbulence, feDisplacementMap), CSS mask‑image, Canvas drawing, and TweenMax, providing step‑by‑step code for generating hotspots, animating them, and integrating image upload and canvas clearing in a web page.

CSSCanvasMasking
0 likes · 13 min read
Liquid Flow Effects with SVG, CSS Masking, and Canvas – A Frontend Development Tutorial
转转QA
转转QA
Jul 4, 2022 · Frontend Development

Introduction to the Updated Mind Map Component 2.0 in ZZcase Platform V5.0

The article details the release of ZZcase's V5.0 mind‑map component 2.0, highlighting new interaction modes, redesigned UI, customizable themes, right‑click menus, export options, and performance optimizations for SVG rendering to improve user efficiency and scalability.

SVGUI Componentmind map
0 likes · 5 min read
Introduction to the Updated Mind Map Component 2.0 in ZZcase Platform V5.0
MaGe Linux Operations
MaGe Linux Operations
Apr 8, 2022 · Frontend Development

12 Must‑Try Front‑End Tools to Supercharge Your UI Design

This article presents a curated list of twelve essential front‑end tools—including color scheme generators, font previewers, SVG converters, CSS generators, blob and wave creators, and a clipping path editor—each with brief descriptions and direct links to help developers enhance UI design and workflow efficiency.

CSSDesignSVG
0 likes · 4 min read
12 Must‑Try Front‑End Tools to Supercharge Your UI Design
Top Architect
Top Architect
Apr 6, 2022 · Backend Development

High‑Fidelity Baidu Wenku Clone Project Overview and Technical Stack

This article introduces a fully functional, open‑source Baidu Wenku‑style document library built with Go/Beego, Bootstrap, and MySQL, detailing its architecture, SVG‑based document rendering, point system, watermarking, and how to obtain the source code.

Backend DevelopmentBeegoDocument Management
0 likes · 5 min read
High‑Fidelity Baidu Wenku Clone Project Overview and Technical Stack
NetEase LeiHuo UX Big Data Technology
NetEase LeiHuo UX Big Data Technology
Mar 7, 2022 · Frontend Development

Web Animation Techniques: CSS Frame, Tween, JavaScript, SVG, and Canvas

Web animation enhances user experience by providing visual feedback and dynamic content, and this article surveys common frontend animation methods—including CSS frame and tween animations, JavaScript style manipulation, SVG animations, and Canvas/WebGL techniques—detailing their implementations, use cases, and performance considerations.

CSSCanvasSVG
0 likes · 9 min read
Web Animation Techniques: CSS Frame, Tween, JavaScript, SVG, and Canvas
ByteDance ADFE Team
ByteDance ADFE Team
Mar 7, 2022 · Frontend Development

2D Drawing on the Web: Basics, Techniques, and Performance Optimizations

This article introduces the fundamentals of 2D drawing on the web using SVG, Canvas, and WebGL, compares their strengths, demonstrates code examples for shapes and paths, explains event handling and picking methods, and provides practical performance optimization strategies for rendering and interaction.

2d-drawingCanvasSVG
0 likes · 10 min read
2D Drawing on the Web: Basics, Techniques, and Performance Optimizations
Tencent Cloud Developer
Tencent Cloud Developer
Mar 2, 2022 · Frontend Development

Front-end Page Screenshot: dom-to-image and html2canvas – Usage and Implementation Principles

This article compares the front‑end screenshot libraries dom‑to‑image and html2canvas, explains their APIs and underlying SVG‑or‑canvas rendering pipelines, walks through typical usage code, highlights common pitfalls such as cross‑origin images and scrolling, and offers practical configuration and debugging tips for developers.

CanvasFront-endSVG
0 likes · 21 min read
Front-end Page Screenshot: dom-to-image and html2canvas – Usage and Implementation Principles
Python Crawling & Data Mining
Python Crawling & Data Mining
Feb 2, 2022 · Backend Development

Bypass SVG Anti‑Scraping and Extract Data with Selenium and requests‑html

This article explains how to scrape data protected by SVG background‑image anti‑scraping by using Selenium to retrieve the SVG URL, parsing the SVG with requests‑html to map background offsets to characters, replacing SVG nodes with text, and finally extracting structured information such as phone numbers and reviews.

Data ExtractionSVGSelenium
0 likes · 11 min read
Bypass SVG Anti‑Scraping and Extract Data with Selenium and requests‑html
DeWu Technology
DeWu Technology
Jan 17, 2022 · Frontend Development

Figma + GitLab CI: A Modern Icon Delivery Workflow

This article outlines a modern icon delivery workflow that moves from static image resources to a Figma‑driven process, using a custom Figma plugin and GitLab CI to fetch, optimize with SVGO, and automatically generate React/Vue SVG component libraries, publish npm packages, and deploy documentation.

Component LibraryFigmaGitLab CI
0 likes · 9 min read
Figma + GitLab CI: A Modern Icon Delivery Workflow
Alimama Tech
Alimama Tech
Aug 11, 2021 · Artificial Intelligence

Dynamic Descriptive Model: A Scalable Paradigm for High‑Quality Native Creative Generation

The Dynamic Descriptive Model (DDM) introduces a scalable pipeline that automatically harvests product assets, perceives their visual attributes, encodes designers’ expertise in an extended SVG‑based descriptive language, and generates high‑quality, native‑looking ad creatives at massive scale, delivering 5‑80 % CTR gains and tens of millions of daily outputs.

AIAdvertisingComputer Vision
0 likes · 13 min read
Dynamic Descriptive Model: A Scalable Paradigm for High‑Quality Native Creative Generation
Baidu Geek Talk
Baidu Geek Talk
Jul 21, 2021 · Frontend Development

Evolution of Web Icon Implementation: From Images to Component-Based SVG Icons

The article traces the evolution of web icon implementation—from separate image files and CSS sprites to font icons, then SVG sprites and inline SVG—highlighting performance, maintenance, and accessibility trade‑offs, and describes Baidu’s centralized icon management platform that optimizes, version‑controls, and generates framework‑specific component packages.

CSS spritesComponent-based DevelopmentIcon Fonts
0 likes · 15 min read
Evolution of Web Icon Implementation: From Images to Component-Based SVG Icons
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jun 23, 2021 · Frontend Development

Complete Guide to SVG: Elements, Animations, and Practical Applications

This guide explains why SVG outperforms raster images, details core elements like the svg container and path commands along with basic shapes, and compares three animation methods—SMIL, CSS, and JavaScript—offering practical techniques such as line drawing, morphing, stroke effects, and motion‑path animation for responsive, scalable web graphics.

Path MorphingSMILSVG
0 likes · 26 min read
Complete Guide to SVG: Elements, Animations, and Practical Applications
Aotu Lab
Aotu Lab
Apr 20, 2021 · Frontend Development

How to Master SVG’s feTurbulence Filter for Realistic Natural Textures

This article explores the fundamentals of the SVG feTurbulence filter, explains each of its parameters, demonstrates how they affect Perlin‑noise‑based textures, and provides practical code examples for creating water‑flow and paper‑grain effects in web graphics.

FiltersPerlin NoiseSVG
0 likes · 11 min read
How to Master SVG’s feTurbulence Filter for Realistic Natural Textures
ELab Team
ELab Team
Apr 8, 2021 · Frontend Development

Mastering SVG: From Basics to Advanced Techniques

This comprehensive guide explains what SVG is, how it differs from bitmap images, its XML foundation, basic syntax, viewBox and viewport handling, common shape elements, animation, gradients, usage patterns, comparison with Canvas, optimization tips, fallback strategies, and media‑query integration, all illustrated with code examples and diagrams.

GraphicsHTMLSVG
0 likes · 25 min read
Mastering SVG: From Basics to Advanced Techniques
ByteFE
ByteFE
Mar 26, 2021 · Frontend Development

Curated Frontend Development Resources: Accessibility, CSS, JavaScript, and Low‑Code

This post curates a selection of frontend development articles on accessible components, gesture‑driven design, CSS performance tricks, obscure CSS properties, SVG filters, WebAssembly video frame extraction, Notion editor architecture, low‑code/no‑code tools, and front‑end engineering low‑code systems.

SVGWebAssemblyaccessibility
0 likes · 3 min read
Curated Frontend Development Resources: Accessibility, CSS, JavaScript, and Low‑Code
Didi Tech
Didi Tech
Feb 25, 2021 · Frontend Development

Why LogicFlow Is the Ideal Front-End Framework for Flowchart Visualization

LogicFlow, born from DiDi's intelligent middle‑platform, provides a flexible, SVG‑based flowchart editor with rich APIs, MVVM architecture, and extensibility that lets front‑end developers quickly build and customize workflow visualizations while outperforming competing libraries in rendering speed.

ExtensionFlowchartLogicFlow
0 likes · 17 min read
Why LogicFlow Is the Ideal Front-End Framework for Flowchart Visualization
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jan 7, 2021 · Frontend Development

How Lottie Turns JSON Into Smooth Web Animations: A Deep Dive

This article explains how Lottie uses JSON exported from Adobe After Effects via the Bodymovin plugin to render vector animations on the web, detailing the export workflow, JSON structure, renderer initialization, layer processing, and the requestAnimationFrame‑driven playback loop with code examples.

BodymovinJSON animationLottie
0 likes · 20 min read
How Lottie Turns JSON Into Smooth Web Animations: A Deep Dive
vivo Internet Technology
vivo Internet Technology
Jan 6, 2021 · Frontend Development

Master D3.js: From Core Modules to Building a Custom Bar Chart

This article explains D3.js fundamentals—including its selection, join, and scale modules—then walks through a step‑by‑step implementation of a fully customized bar chart using SVG, demonstrating how to bind data, create axes, and add interactive tooltips.

D3.jsData visualizationInteractive Charts
0 likes · 11 min read
Master D3.js: From Core Modules to Building a Custom Bar Chart
Aotu Lab
Aotu Lab
Oct 22, 2020 · Frontend Development

Master CSS Animations: From Simple Transitions to Advanced SVG Loading Effects

This article provides a comprehensive guide to CSS animation techniques, covering basic transition and animation properties, continuous scrolling, bounce effects, like button bursts, SVG‑based loading and progress bars, typing simulations, frame‑by‑frame sprite animations, and the use of steps() for timing control, all illustrated with practical code examples.

CSSSVGWeb
0 likes · 13 min read
Master CSS Animations: From Simple Transitions to Advanced SVG Loading Effects
Xianyu Technology
Xianyu Technology
Jul 21, 2020 · Frontend Development

Mobile Web Screenshot Solution Using Canvas

This article presents a custom canvas‑based mobile screenshot solution for single‑page applications that overcomes cross‑origin image blocking, low scaling clarity, inaccurate arc rendering, and deep DOM parsing issues by loading images anonymously, rendering at higher resolution, using precise arc patterns, and measuring text for proper wrapping.

Mobile WebSVGcanvas screenshot
0 likes · 7 min read
Mobile Web Screenshot Solution Using Canvas
Alibaba Cloud Developer
Alibaba Cloud Developer
Jul 7, 2020 · Mobile Development

Why SVG Can Slow Down Your Flutter Apps and How to Optimize It

This article examines the performance pitfalls of using SVG images in Flutter applications, presents real‑world rasterization cost measurements on mobile devices, discusses the lack of native SVG support, and offers practical tooling and code‑level solutions to make SVG usage efficient.

FlutterMobile DevelopmentRasterization
0 likes · 9 min read
Why SVG Can Slow Down Your Flutter Apps and How to Optimize It
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Mar 29, 2020 · Frontend Development

How to Master Custom Charts with Recharts: Tips, Tricks, and Pitfalls

This tutorial walks through using Recharts in a React project to build highly customizable pie and bar charts, covering background requirements, library selection criteria, core Recharts features, step‑by‑step implementations of ring‑shaped pies with hover effects, gradient bars with rounded tops, SVG path tricks, and final reflections on abstraction and component choices.

CustomChartsDataVisualizationReact
0 likes · 18 min read
How to Master Custom Charts with Recharts: Tips, Tricks, and Pitfalls
Amap Tech
Amap Tech
Mar 6, 2020 · Frontend Development

Exploration and Practice of a Custom SVG‑Based Image Format (ASVG) for In‑Car Navigation UI

Gaode’s team created a proprietary ASVG format by extending and heavily optimizing SVG to address the growing diversity of in‑car screens, cutting UI package size by ~60%, speeding parsing to microseconds, and delivering smoother vector rendering, thereby improving navigation UI quality and maintenance efficiency.

ASVGIn-Car NavigationSVG
0 likes · 12 min read
Exploration and Practice of a Custom SVG‑Based Image Format (ASVG) for In‑Car Navigation UI
Youku Technology
Youku Technology
Feb 25, 2020 · Frontend Development

Design and Optimization of a 100,000‑Seat Venue Seat‑Mapping System: From Flash to Canvas

The rebuilt 100,000‑seat venue mapping platform replaces Flash with an HTML5 Canvas‑SVG hybrid, splits rendering into tiled canvases, loads only visible stands, uses Bézier curves for arbitrary seat deformation, and implements quadrant‑based printing order, delivering fast, flexible, and scalable seat visualization and editing.

CanvasSVGfrontend engineering
0 likes · 11 min read
Design and Optimization of a 100,000‑Seat Venue Seat‑Mapping System: From Flash to Canvas
NetEase Game Operations Platform
NetEase Game Operations Platform
Dec 14, 2019 · Frontend Development

Building a Resource Topology Diagram with d3.js

This article explains how to use d3.js to create interactive resource topology diagrams, covering SVG basics, d3 selections, data binding, enter/update/exit patterns, force‑directed layout, path calculations, and various optimizations such as text centering, arrow markers, and intersection handling.

D3.jsData visualizationSVG
0 likes · 22 min read
Building a Resource Topology Diagram with d3.js
Programmer DD
Programmer DD
Nov 28, 2019 · Frontend Development

Turn Any SVG Chart into Hand‑Drawn Sketches with Sketchify and RoughJS

This article introduces Sketchify, a JavaScript tool built on RoughJS that transforms any SVG‑based chart into a hand‑drawn sketch style, explains its underlying algorithm, provides sample code, demonstrates its application to popular libraries such as ECharts, AntV G2, Highcharts, amCharts and xCharts, and discusses its limitations and resource considerations.

Data visualizationJavaScriptRoughJS
0 likes · 5 min read
Turn Any SVG Chart into Hand‑Drawn Sketches with Sketchify and RoughJS
JD Tech Talk
JD Tech Talk
Sep 12, 2019 · Frontend Development

Yunge Note Platform: Architecture, Design, and Implementation Practices

This article details the design philosophy, ecosystem, project‑management workflow, front‑end framework, SVG handling, React integration, Ant Design icon optimization, mobile scrolling techniques, editor choices, file preview solutions, and JD ME integration for the internally built Yunge Note platform.

SVGfrontendproject-management
0 likes · 25 min read
Yunge Note Platform: Architecture, Design, and Implementation Practices
360 Tech Engineering
360 Tech Engineering
Jul 3, 2019 · Information Security

File Upload Vulnerabilities and Mitigation Strategies

The article explains how attackers can exploit file upload functionality by uploading malicious files, crafted filenames, SVG payloads, or symlinks to achieve remote code execution, data theft, or server denial‑of‑service, and provides practical defense measures such as whitelist validation, content‑type checks, and upload rate limiting.

Node.jsSVGSecurity
0 likes · 8 min read
File Upload Vulnerabilities and Mitigation Strategies
网易UEDC
网易UEDC
Mar 4, 2019 · Frontend Development

Turning Designer‑Written Code into Seamless Front‑End Animations for NetEase Music’s 2018 Listening Report

An in‑depth look at how the NetEase Music 2018 Listening Report’s rich, emotion‑driven animations were crafted, from designer‑written CSS code and thousands of lines of motion design to practical decisions on formats like GIF, SVG, Lottie, and the custom BX‑AE2CSS tool that exports After Effects animations directly to CSS.

CSSDesignSVG
0 likes · 12 min read
Turning Designer‑Written Code into Seamless Front‑End Animations for NetEase Music’s 2018 Listening Report
vivo Internet Technology
vivo Internet Technology
Aug 20, 2018 · Big Data

Circos: The Beauty of Circle - Data Visualization with Circos

Yang Zhentao’s 2018 conference talk surveys data‑visualization fundamentals, highlights the multidisciplinary skills required, introduces the open‑source Circos tool and its polar‑coordinate workflow, showcases genomic and business use cases, and compares alternative platforms, emphasizing data quality, query capability, and proper view selection.

CircosSVGVisualization Tools
0 likes · 21 min read
Circos: The Beauty of Circle - Data Visualization with Circos
Test Development Learning Exchange
Test Development Learning Exchange
May 30, 2018 · Backend Development

Generating QR Codes with the Python qrcode Library

This article explains how to install the qrcode module, generate QR codes using both functional and class‑based APIs, customize parameters such as version and error correction, produce PNG, SVG, and pure‑Python images, use the command‑line tool, and embed logos into QR codes with full code examples.

PythonQR codeQRCode library
0 likes · 10 min read
Generating QR Codes with the Python qrcode Library
Tencent Music Tech Team
Tencent Music Tech Team
Feb 2, 2018 · Backend Development

Generating Long Event Images for QQ Music Albums: Front‑end and Server‑side Solutions, Pitfalls and Optimizations

To quickly create shareable long‑event images for QQ Music albums, the team evaluated client‑side DOM‑to‑image tools (html2canvas and SVG) that suffered from blur, incompleteness, slow rendering and oversized base64 data, then migrated rendering to the server using PhantomJS, node‑canvas and ultimately ImageMagick, whose combined script execution, mpc caching, and Q8 build provided the most balanced quality‑performance solution despite remaining operational quirks.

ImageMagickPhantomJSSVG
0 likes · 15 min read
Generating Long Event Images for QQ Music Albums: Front‑end and Server‑side Solutions, Pitfalls and Optimizations
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jul 27, 2017 · Frontend Development

Create Stunning Wave Effects with Pure CSS, SVG, and Canvas

This article explains why pure CSS wave effects are challenging, demonstrates how to achieve them using SVG and Canvas, and then provides a step‑by‑step pure‑CSS technique—including border‑radius tricks, animations, and SCSS code—to build wave backgrounds and progress charts.

CSSSCSSSVG
0 likes · 7 min read
Create Stunning Wave Effects with Pure CSS, SVG, and Canvas
Hujiang Technology
Hujiang Technology
Mar 14, 2017 · Frontend Development

A Pocket Guide to Inline SVG: Fundamentals, Elements, and Usage

This guide introduces inline Scalable Vector Graphics (SVG) for web developers, covering basic organization, essential elements, shape primitives, path commands, accessibility considerations, and practical code examples to help integrate and manipulate SVG directly within HTML documents.

GraphicsInline SVGSVG
0 likes · 20 min read
A Pocket Guide to Inline SVG: Fundamentals, Elements, and Usage
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 13, 2016 · Frontend Development

Master CSS: Pseudo‑Elements, Fonts, Images, SVG, Animations & Performance

This guide covers essential front‑end techniques—from using ::before and ::after pseudo‑elements and optimizing fonts, images, and SVGs, to mastering CSS3 animations, responsive breakpoints, reflow/repaint performance, and effective class‑naming conventions—providing practical resources and best‑practice tips for modern web development.

CSSSVGanimations
0 likes · 6 min read
Master CSS: Pseudo‑Elements, Fonts, Images, SVG, Animations & Performance
WeChat Client Technology Team
WeChat Client Technology Team
Sep 7, 2015 · Mobile Development

How WeChat Made SVG Resources Faster, Smaller, and Sharper Than PNG on Android

WeChat tackled the trade‑off between image clarity and app size on Android by replacing numerous DPI‑specific PNGs with scalable SVG assets, developing a custom framework and compilation tool that dramatically reduce package volume, improve loading speed, and maintain visual fidelity while keeping developer effort low.

AndroidResource OptimizationSVG
0 likes · 13 min read
How WeChat Made SVG Resources Faster, Smaller, and Sharper Than PNG on Android