Trình chuyển đổi GeoJSON sang SVG
Chuyển đổi GeoJSON sang SVG (Đồ họa Vector Có thể Mở rộng) để tạo bản đồ có thể chỉnh sửa và không phụ thuộc vào độ phân giải. Hoàn hảo cho logo, tài liệu in ấn, bài thuyết trình và sử dụng trên web.
Tại sao chọn SVG?
Không phụ thuộc vào độ phân giải
- Mở rộng hoàn hảo đến bất kỳ kích thước nào mà không mất chất lượng
- Sẵn sàng in ấn ở bất kỳ độ phân giải nào
- Hiển thị Retina/4K trông hoàn hảo
- Phóng to vô hạn mà không bị vỡ hình
Có thể chỉnh sửa
- Mở bằng Illustrator, Inkscape hoặc Figma để chỉnh sửa nâng cao
- Thay đổi màu sắc, nét vẽ, vùng tô sau khi xuất
- Thêm văn bản, chú thích, logo bằng phần mềm thiết kế
- Kết hợp với đồ họa khác một cách dễ dàng
Thân thiện với web
- Kích thước tệp nhỏ cho các bản đồ đơn giản
- Định kiểu bằng CSS — định kiểu với CSS trên trang web
- Hoạt hình JavaScript — tạo hoạt hình cho đường nét và thuộc tính
- Nhúng trực tiếp — dán trực tiếp vào HTML
- Có thể truy cập — trình đọc màn hình có thể đọc nội dung SVG
Các trường hợp sử dụng
✅ Logo và thương hiệu — Bản đồ vị trí công ty
✅ Tài liệu in ấn — Tờ rơi, áp phích, sách
✅ Đồ họa web — Biểu tượng, huy hiệu, thành phần giao diện người dùng
✅ Trực quan hóa dữ liệu — Đồ họa thông tin, bảng điều khiển
✅ Hàng hóa — Áo thun, nhãn dán, cốc
✅ Bài thuyết trình — Slide có thể mở rộng đẹp mắt
Cách chuyển đổi
- Tải lên tệp GeoJSON của bạn (kéo thả hoặc duyệt)
- Xem trước bản đồ được hiển thị
- Định dạng được đặt tự động là SVG
- Tải xuống bản đồ vector của bạn
Công cụ tạo mã SVG sạch, được tối ưu hóa và hoạt động ở mọi nơi.
Các tính năng của SVG
Những gì bạn nhận được
- Mã sạch — Mã SVG dễ đọc
- Định dạng tiêu chuẩn — Tương thích với tất cả các công cụ thiết kế
- Đường nét được tối ưu hóa — Đơn giản hóa để giảm kích thước tệp
- viewBox đúng chuẩn — Mở rộng chính xác
- Phép chiếu địa lý — Lật để hướng bắc lên trên
Chỉnh sửa sau khi xuất
Mở SVG của bạn bằng:
- Adobe Illustrator — Chỉnh sửa vector chuyên nghiệp
- Inkscape — Lựa chọn miễn phí, mã nguồn mở
- Figma — Công cụ thiết kế dựa trên trình duyệt
- Sketch — Phần mềm thiết kế dành cho Mac
- Bất kỳ trình chỉnh sửa văn bản nào — SVG chỉ là XML
Tùy chọn định kiểu
- Màu nét vẽ — Màu đường viền cho các ranh giới
- Độ rộng nét vẽ — Độ dày đường nét
- Màu vùng tô — Màu bên trong của đa giác
- Độ mờ — Mức độ trong suốt
- Nền — Trong suốt hoặc có màu
Các trường hợp sử dụng phổ biến
Thiết kế & Thương hiệu
- Bản đồ vị trí công ty cho trang web
- Bản đồ vùng phủ sóng khu vực cho tiếp thị
- Bản đồ khu vực dịch vụ cho bài thuyết trình
- Bộ biểu tượng từ các hình học đơn giản
Xuất bản in ấn
- Minh họa sách — Hướng dẫn du lịch, sách giáo khoa
- Đồ họa tạp chí — Bản đồ biên tập
- Áp phích — Bản đồ sự kiện, tài liệu hội nghị
- Danh thiếp — Bản đồ vị trí trên danh thiếp
Phát triển web
- Bản đồ tương tác với CSS/JS
- Đường nét hoạt hình — Hoạt hình vẽ đường nét
- Đồ họa đáp ứng — Mở rộng theo khung nhìn
- Thư viện biểu tượng — Biểu tượng bản đồ có thể tái sử dụng
Hàng hóa
- Thiết kế áo thun — Đường viền bang/quốc gia
- Nhãn dán — Hình dạng địa lý
- Cốc và ly — Sản phẩm theo vị trí
- Áp phích — Nghệ thuật bản đồ tối giản
Mẹo để có kết quả tốt nhất
Tối ưu hóa kích thước tệp
- Đơn giản hóa hình học trước khi xuất (sử dụng GeoJSON Minifier)
- Xóa các thuộc tính không cần thiết khỏi các thuộc tính GeoJSON
- Gộp các đa giác liền kề khi có thể
- Sử dụng ít chữ số chính xác hơn trong tọa độ
Mẹo thiết kế
- Giữ đơn giản — SVG hoạt động tốt nhất cho các bản đồ rõ ràng, sạch sẽ
- Sử dụng màu sắc đồng nhất — Tránh các gradient phức tạp
- Kiểm tra ở các kích thước khác nhau — Đảm bảo dễ đọc khi mở rộng
- Cân nhắc tỷ lệ nét vẽ và vùng tô — Nét vẽ dày có thể làm quá tải các bản đồ nhỏ
Hiệu suất web
- Nhúng SVG nhỏ trực tiếp — Nhúng trực tiếp vào HTML
- Tệp bên ngoài cho bản đồ lớn — Liên kết đến tệp .svg
- Tải chậm — Tải SVG khi hiển thị
- Nén — Sử dụng SVGO hoặc các công cụ tương tự để tối ưu hóa
Chi tiết kỹ thuật
Phép chiếu
- Web Mercator mặc định (tiêu chuẩn cho bản đồ web)
- Trục Y lật ngược để hướng bắc lên trên (SVG có trục Y hướng xuống mặc định)
- Tọa độ được bảo toàn để đại diện địa lý chính xác
Cấu trúc SVG
xml
<svg viewBox="minX minY width height">
<path d="M x,y L x,y..." />
<!-- Một đường path cho mỗi đối tượng -->
</svg>Tương thích trình duyệt
- ✅ Tất cả các trình duyệt hiện đại (Chrome, Firefox, Safari, Edge)
- ✅ IE 9+ (hỗ trợ cơ bản)
- ✅ Trình duyệt di động (Safari iOS, Chrome)
Câu hỏi thường gặp
Tôi có thể chỉnh sửa SVG sau khi xuất không?
Có! Mở nó bằng bất kỳ trình chỉnh sửa vector nào (Illustrator, Inkscape, Figma, v.v.) để thay đổi màu sắc, thêm văn bản hoặc chỉnh sửa hình dạng.
SVG có hỗ trợ độ trong suốt không?
Có, SVG hỗ trợ nền trong suốt và các mức độ mờ.
Kích thước tệp như thế nào?
Tệp SVG thường nhỏ (vài KB) đối với các bản đồ đơn giản. Các bản đồ phức tạp với nhiều đối tượng sẽ lớn hơn.
Tôi có thể sử dụng SVG để in ấn không?
Chắc chắn! SVG không phụ thuộc vào độ phân giải và hoàn hảo để in ở bất kỳ kích thước nào.
Làm thế nào để thay đổi màu sắc?
Trong trình chỉnh sửa văn bản, tìm các thuộc tính stroke và fill và thay đổi giá trị màu sắc. Hoặc sử dụng phần mềm thiết kế để chỉnh sửa trực quan.
Tôi có thể tạo hoạt hình cho bản đồ SVG không?
Có! SVG có thể được tạo hoạt hình bằng CSS hoặc JavaScript. Mỗi đường path có thể được định kiểu và tạo hoạt hình riêng.
Việc chuyển đổi có làm mất dữ liệu không?
Không, dữ liệu địa lý được bảo toàn chính xác. Một số đơn giản hóa hình ảnh có thể xảy ra đối với các hình dạng rất phức tạp.
Xem thêm
- GeoJSON sang PNG — Hình ảnh raster với nền trong suốt
- GeoJSON sang JPEG — Hình ảnh raster nén
- Quay lại tất cả các trình chuyển đổi