Подготовили список инструментов, которые помогут вам с правильно использовать простоту и гибкость формата SVG в своих проектах.

Когда возможностей редактирования векторных изображений стилями в разметке недостаточно, помочь могут бесплатные графические редакторы. Возможностей “Иллюстратора”, конечно, не будет, но для базовых потребностей в редактировании вполне сойдет.

Inkscape

Наиболее многосторонний вариант – Inkscape. Это бесплатный векторный графический редактор с открытым исходным кодом, который предоставляет несколько инструментов для рисования и манипуляций с объектами. Кроме импорта вектора, также поддерживается AI, EPS, PS и PNG.

Boxy SVG

Другим бесплатным графическим редактором является Boxy SVG. Это мультиплатформенный редактор, который способен работать не только в браузерах на Chromium, но и на любой из доступных вам ОС: Windows, MacOS и все семейство Linux.

Если вы не хотите создавать вектор с нуля, ряд браузерных инструментов поможет вам конвертировать существующие изображения в векторную графику без трудоемкой ручной работы.

PicSVG

PicSVG позволяет загрузить изображение на сайт, где мгновенно происходит конвертация в вектор. Работает с PNG, JPEG и GIF.

Vectormagic

Vectormagic предлагает более сложные функции. Этот инструмент дает больше контроля, позволяя просматривать результат и настраивать, например, цвета и уровень детализации. После регистрации доступны две бесплатные конвертации, затем придется воспользоваться одним из тарифов по подписке (от $7,95).

px2svg

Если вам нужно превратить растровое изображение в векторное, проверьте px2svg от Эрика Мейера (Eric Meyer). Это небольшой PHP-скрипт, который обрабатывает исходное изображение попиксельно, прямоугольник к прямоугольнику воссоздавая оригинал в векторном виде.

Каждое пересечение, путь, десятичное значение и каждая часть мета-информации усложняет SVG и когда на вашем сайте становится много таких изображений, их необходимо оптимизировать, иначе это начнет сказываться на скорости работы сайта.

Базовая оптимизация

Чтобы быть уверенным в содержимом файла и не потерять лишнее, сокращая объем, следует воспользоваться ручным редактированием. Для этого подойдет любой редактор кода с живым предпросмотром изображений – это позволит вычистить файл от служебных классов, лишних пробелов и запятых не нарушив целостность графики. Хорошей идеей будет воспользоваться гайдом от Андреаса Ларсена (Andreas Larsen), если решите делать все руками.

Кроме того, можно использовать специальные сервисы для автоматической оптимизации, например svgo. Но тут стоит быть внимательным – чтобы сохранить важное содержимое (например, относящееся к анимации), лучше все-таки делать это вручную.

Создание SVG-набора

SVG-набор может стать отличной альтернативой классическим шрифтам-иконкам. В то время как, если со шрифтом возникнет какая-то проблема, пользователь не увидит ничего, SVG может грациозно откатиться к PNG (главное предусмотреть эту возможность).

Создание таких наборов возможно вручную – здесь Крис Койлер (Chris Coyier) рассказывает, как это сделать. А можно воспользоваться плагином для Grunt grunt-svgstore или gulp-svgstore для Gulp.

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Как исследовать и визуализировать данные МО для обнаружения объектов на изображениях