Вещи, которые вам нужно знать о работе с SVG в VS Code

veshhi kotorye vam nuzhno znat o rabote s svg v

Просмотрите это видео с основными моментами выпуска VS Code от Брайана Кларка. В конце показывает, как теперь можно увеличить предварительный просмотр изображений в VS Code.

Я подумал, что это любопытная функция. Я имею в виду, давайте посмотрим правде в глаза — в мире только два типа людей: те, кто любит увеличивать изображение, и те, кто не признает этого. Поэтому я открыл проект, который мне пришлось проверить, и, конечно, он работает как рекламируется.

1*cClUCHBbOIxPq5X5vHOPEg

Мое следующее мнение было проверить, работает ли это на изображениях SVG. Потому что я люблю увеличивать SVG и наблюдать, как он не ухудшается. На данном этапе моей жизни это приятная и полноценная деятельность.

Оказывается, VS Code не обеспечивает визуальный предварительный просмотр файлов SVG в редакторе. Что имеет смысл. SVG – это разметка, а VS Code рассматривает файлы SVG как XML, который является только текстом. Вам понадобится XSLT, чтобы превратить его в то, что вы можете просмотреть. Я только что вызвал много вас, и я прошу прощения за это.

Вот замечательная шутка о XML, чтобы успокоить вашу тревогу:

«XML похож на насилие: если он не работает, вы используете его недостаточно»

— неизвестно

Это заставило меня задуматься, если VS Code рассматривает SVG как XML, какие расширения доступны, чтобы помочь мне работать с SVG в VS Code? Оказывается, их достаточно много, и некоторые работают лучше других. Вот несколько моих любимых расширений для работы с SVG в VS Code.

SVG

Первое расширение называется просто SVG.

Это верно. Этот человек был первым в игре и получил желаемое название SVG. Как человек, зарегистрировавший в Twitter имя «Берк». Какого черта, Сэм! Вы не писали в Твиттере в….ВЫ НИКОГДА НЕ ЧЕРЕКРЕКАЛИ!

1*le6FD4mNmlHMu7jTMlb2kA
Сэм, если ты это читаешь – твитни мне, и давай поговорим. Серьезно. Вам даже не нужна эта учетная запись!

Как вы можете видеть из этого GIF файла здесь, Visual Studio Code имеет ограниченную поддержку SVG, поскольку мы знаем, что он рассматривает его как XML. Он знает, как правильно выделить разметку, но это все. Обратите внимание, что здесь практически нет предложений для меня, когда я пытаюсь сделать этот прямоугольник.

1*XXkYkF9VkrjPjhopsqIw_Q

Основное, что делает расширение SVG, это добавляет поддержку языка для SVG в Visual Studio Code. Теперь, когда я начинаю печатать rectон дает мне варианты для элементов, которые я могу выбрать и описание того, что они собой представляют.

1*e_782ezwZaplm7oTTT6TAQ

Получив элемент, он также знает обо всех возможных атрибутах.

1*n2coQIEQfmPGGGw31yWhGg

И он даже знает значение для некоторых из этих атрибутов, если они перечислены.

1*NCML04UHivsnY5J0NhalWw

Предварительный просмотр

Это расширение также предоставляет функцию «Предварительный просмотр», которая показывает бок о бок предварительный просмотр с разметкой и воспроизведенным изображением. Это доступно с панели команд (Ctrl/Cmd+Shift+P).

1*_Y0488W57gQZhmTtaYcmOw

Интересно, что предварительный просмотр обновляется при вводе SVG. Это создает достаточно аккуратную песочницу для создания изображений SVG вручную, если это ваши проблемы.

1*-YsmT0Fp2pfuTjjrAVZumA

Уменьшить

Это расширение также содержит команду minify, которая уменьшит ваш SVG с помощью SVGO. Возьмите это замечательное изображение склона холма, созданное с помощью Sketch. Да, я все сделал сам.

1*U2XGkBcryp-WNyzjbemn0g

Это изображение уже достаточно маленькое. Он занимает около 9 Кб на диске. Расширение SVG предоставляет команду «Уменьшить» на панели команд (Ctrl/Cmd+Shift+P). Использование этой команды уменьшает размер изображения до 5 Кб. Это почти половина. Достаточно впечатляюще.

Если мы используем встроенные дифференциалы Git в VS Code, мы можем увидеть кое-что из того, что делает SVGO. Он удаляет вещи, которые нам не нужны, например «id» или параметр 0, где по умолчанию уже 0. Он также превратил мой rect к path. Я не знаю почему, но это очень интересно! Как бы то ни было, SVGO. Я тебе доверяю. Делай свое дело.

1*2FIKY-LKJ4yF0DfFteHwdQ

Это большинство того, что делает SVG для VS Code. Но есть другое расширение SVG, которое также актуально здесь. Просмотрщик SVG.

Просмотрщик SVG

SVG Viewer – Visual Studio Marketplace
Расширение для Visual Studio — средство просмотра SVG для Visual Studio.marketplace.visualstudio.com

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

"svgviewer.enableautopreview": true,

И он уменьшает изображение, чтобы соответствовать окну. Я еще не знаю, нравится ли мне это, но думаю, что нравится. Мне кажется, я предпочитаю это, чем гигантское изображение, которое я не вижу целиком.

1*KhmcEToLx4stYr0P4tDtTA

Преобразовать в PNG

Это расширение также добавляет команду преобразования, чтобы вы могли встроить конвертацию SVG в PNG. Возьмите это изображение грузовика. Я экспортировал его как SVG, но это только URI данных, завернутый в тег svg. В этом нет смысла. Я мог бы также вернуть его к статическому изображению. С этим расширением мне не нужно возвращаться в Sketch, чтобы это сделать.

1*A07GtiA0XJ4holgAzKYG7A

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

Последнее расширение, которое следует отметить, это редактор SVG.

Редактор SVG

Редактор SVG – Visual Studio Marketplace
Расширение для Visual Studio Code – визуальный и литеральный редактор SVG для VSCode.marketplace.visualstudio.com

Расширение SVG Editor очень агрессивно. Он пытается создать полную поверхность для редактирования SVG внутри VS Code вместе с инструментами рисования и девятью ярдами.

Важно отметить, что это расширение для меня вообще не работает. Вроде бы он есть, но, насколько я могу судить, он ничего не делает. А может быть, я делаю это неправильно. Есть большая вероятность этого. Мой комплексный подход к тестированию заключался в том, чтобы «щелкнуть вокруг группы и посмотреть, что произойдет». Ничего никогда не делал.

1*cvxmnb8Zp_w98wK5Vc-BEA

Да – не работает. Но кончик шляпы за попытку встроить графический редактор в Visual Studio Code. Это непростая задача, и тот факт, что кто-то даже пытался это сделать, меня поразил.

Наслаждайтесь своим SVG

Благодаря расширениям VS Code имеет достаточно надежную поддержку SVG. Две важные вещи для меня – завершение кода и предварительный просмотр. Хотя я должен заметить, что вы не можете увеличить масштаб предыдущего просмотра, поэтому я все еще не могу удовлетворить свое странное желание наблюдать за масштабом векторной графики.

Вы можете получить последнюю версию VS Code сегодня и установить эти расширения SVG на досуге.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *