Копировать css и svg в фотошопе что это
Перейти к содержимому

Копировать css и svg в фотошопе что это

  • автор:

Как вырезать svg из макета?

Как правильно вырезать svg из psd макета? Через Export as. можно выбрать формат сохранение svg, а на деле сохраняет картинку которая портится при масштабировании. Читал что можно через File > Extract Assets , но такого меню у меня нет(версия CC 2015.1.1)

Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 382 382 бронзовых знака
задан 6 авг 2016 в 20:05
39 6 6 бронзовых знаков

Вот же на хабре разбирали действующий способ. у меня заработало. habrahabr.ru/company/ua-hosting/blog/277673

26 янв 2018 в 10:00

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Это самая плохая практика, на мой взгляд,- рисовать в растровом редакторе, потом сохранять через плагин в векторном формате.

  • Дело в том, что Photoshop недостаточно точно присваивает стили элементам.
  • Порою они перекрывают друг друга и противоречат сами себе.
  • Изображения часто выходят за границу документа и поэтому обрезаются в SVG.
  • Файл SVG выглядит просто чудовищно.
  • Верстальщику потом нужно править этот файл вручную и очень часто, по ряду причин, ему не под силу сделать это. В топиках на нашем сайте не раз поднимался вопрос о недопустимости применения фотошопа для изготовления векторных изображений:

Вывод один,- векторные изображения надо рисовать в векторном редакторе!

Если не хватает желания освоить векторный редактор, то тем более не хватит сил и желания править файлы svg, сделанные в растровом редакторе.

С Photoshop CC 2018 копирую svg картинку(пкм), а в Illustrator вставляет только текст?

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

  • Вопрос задан более трёх лет назад
  • 99 просмотров

2 комментария

Средний 2 комментария

delphinpro

Сергей delphinpro @delphinpro

Копировать SVG — это копирование кода SVG. Логично, что вставляется этот код текстом.

Копировать SVG, вставить в новый файл (в блокноте, в IDE), открыть файл в люстре. Я так делаю.

navalgn @navalgn Автор вопроса

Сергей delphinpro, Парень с Мака правда скидал видео как он так делал и вставляется картинка, у него всё работает

SVG и CSS

На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG (en-US) .

Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.

Общая информация: SVG

SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.

SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.

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

Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.

На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определённых браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference (en-US) , для информации о поддержке отдельных элементов.В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.Более подробная информация о SVG в Mozilla, представлена на станице SVG (en-US) в этой wiki.

За дело: Демонстрация SVG

Создайте новый документ SVG, как обычный текстовый файл, doc8.svg . Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

 DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> title>SVG demonstrationtitle> desc>Mozilla CSS Getting Started - SVG demonstrationdesc> defs> g id="segment" class="segment"> path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> g> g id="quadrant"> use xlink:href="#segment"/> use xlink:href="#segment" transform="rotate(18)"/> use xlink:href="#segment" transform="rotate(36)"/> use xlink:href="#segment" transform="rotate(54)"/> use xlink:href="#segment" transform="rotate(72)"/> g> g id="petals"> use xlink:href="#quadrant"/> use xlink:href="#quadrant" transform="rotate(90)"/> use xlink:href="#quadrant" transform="rotate(180)"/> use xlink:href="#quadrant" transform="rotate(270)"/> g> radialGradient id="fade" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> stop id="fade-stop-1" offset="33%"/> stop id="fade-stop-2" offset="95%"/> radialGradient> defs> text id="heading" x="-280" y="-270"> SVG demonstrationtext> text id="caption" x="-280" y="-250"> Move your mouse pointer over the flower.text> g id="flower"> circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> use id="outer-petals" xlink:href="#petals"/> use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> g> svg> 

Создайте новый файл CSS, style8.css . копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

/*** SVG demonstration ***/ /* page */ svg  background-color: beige; > #heading  font-size: 24px; font-weight: bold; > #caption  font-size: 12px; > /* flower */ #flower:hover  cursor: crosshair; > /* gradient */ #fade-stop-1  stop-color: blue; > #fade-stop-2  stop-color: white; > /* outer petals */ #outer-petals  opacity: 0.75; > #outer-petals .segment-fill  fill: azure; stroke: lightsteelblue; stroke-width: 1; > #outer-petals .segment-edge  fill: none; stroke: deepskyblue; stroke-width: 3; > #outer-petals .segment:hover > .segment-fill  fill: plum; stroke: none; > #outer-petals .segment:hover > .segment-edge  stroke: slateblue; > /* inner petals */ #inner-petals .segment-fill  fill: yellow; stroke: yellowgreen; stroke-width: 1; > #inner-petals .segment-edge  fill: none; stroke: yellowgreen; stroke-width: 9; > #inner-petals .segment:hover > .segment-fill  fill: darkseagreen; stroke: none; > #inner-petals .segment:hover > .segment-edge  stroke: green; > 

Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.

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

Примечания к демонстрации:

  • Документ SVG привязывается к таблице стилей общепринятым способом.
  • SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.
Изменить таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.
Что дальше?

В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: Данные XML

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

  • MDN on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

Как установить расширение (плагин) для копирования стилей в photoshop cc 2018?

Всем привет! Ищу возможность установить на photoshop cc 2018 плагины или расширения для копирования css свойств объектов. Таких знаю только 2 CSS Hat и CSS3Ps.

Перечитал тонну информации, пересмотрел видео 1 и видео 2 со всеми коментами, делал все по рекомендациям начиная от закидывания в определенные папки и заказчивая изменениями ключей реестров — эффекта 0.

Фотошоп не видит расширения, а для установки через Adobe Extension Manager нужен обязательно файл с расширением .zxp. К примеру, в CSS3Ps идет только zip архив без наличия такого файла (переименование расширения архива результата не принесло), а более древние версии .zxp не подходят, т.к. устарели..
Есть ли решение данной проблемы? У кого-нить удалось установить и есть ли пошаговый алгоритм для этого?

  • Вопрос задан более трёх лет назад
  • 3678 просмотров

2 комментария

Средний 2 комментария

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

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