Как распечатать файл svg

Обновлено: 07.07.2024

SVG to PDF -программа для печати SVG файлов большого размера

Программа SVG to PDF разбивает SVG чертеж на листы формата А4 и формирует постраничный PDF файл для печати.

SVG – распространенный векторный формат (масштабируемая векторная графика). Чертежи в формате SVG можно редактировать в графических редакторах (Adobe Illustrator, Inkscape, CorelDRAW, GIMP, sK1, Sketsa SVG Editor), а также данный формат поддерживается большинством браузеров и некоторыми офисными приложениями.

Но только речь заходит о печати SVG файла большого размера в масштабе 1:1 начинаются разного рода сложности… Конвертор SVG to PDF предназначен облегчить печать SVG большого размера. В нашем с Вами случае это печать выкроек.

Если Вам необходимо распечатать SVG чертеж большого размера на нескольких листах, а затем распечатанные листы склеить – выполните несколько шагов описанных ниже.

Прежде чем Вы приступите хочу, сообщить о работе on-line конвертера SVG 2 PDF аналогичного по интерфейсу и функциям с программой описанной ниже.

Шаг 1.

Загрузите (скачайте) архив программы для нужной операционной системы.

On-line SVG to PDF (сервис работает через браузер, не требует скачивания и установки)

Шаг 2.

Распакуйте архив (извлеките из архива файлы на жесткий диск)

Шаг 3.

Для Windows: В папке /svg2pdf_gui/ найдите и запустите svg2pdf_gui.exe

Для Linux: В папке /svg2pdf_gui/ найдите и запустите svg2pdf_gui

Шаг 4.

Выберите файл SVG, который необходимо конвертировать в PDF.В поле Destination file отобразиться путь и имя PDF файла, в который будет выполняться конвертация.

Шаг 5.

Укажите размер полей (отступы от края листа) слева, справа, сверху и снизу.

Поставьте галочку Print page numbers, если необходимо нумеровать страницы.

Поставьте галочку Print Title page, если необходимо сгенерировать страницу с расположением листов.

Шаг 6.

Ограничения

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

Также есть проблемы с отображением векторных стилей.
В частности маркеры при конвертации в PDF отображаться не будут.
Линии разметки для склеивания

В программе не предусмотрена печать линий для совмещения распечатанных листов. Об этом Вы должны позаботиться сами. В выкройках обычно присутствует сетка 10смх10см для совмещения листов.

Насколько хорошо Scalable Vector Graphics работает для печати?

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

Как программист, с SVG легче работать, но, похоже, он не был принят в графической индустрии. Раньше были проекты для печати графики на основе SVG (например, Adobe PDFXML), но ни один из них сейчас не работает. Кроме того, инструменты Adobe, кажется, закончили короткую работу с SVG.

Если я выберу SVG в качестве формата поставки, какие могут быть проблемы по сравнению с альтернативой (альтернативами)? Я слышал жалобы на обработку текста SVG, но я не нашел подробного обсуждения. Я подозреваю, что еще одна проблема может заключаться в том, насколько четко SVG конвертируется в PDF.

Должны быть библиотеки, которые могут конвертировать в PDF для вас.

Собственно, для печати EPS или PDF было бы лучше. SVG подходит для веб-сайтов (именно для этого он и был разработан), но часто возникают проблемы с RIP при печати. Большинство дизайнеров, которым предоставляются SVG-файлы, открывают их в векторном приложении и повторно сохраняют как собственные файлы, eps или PDF. Я НИКОГДА не отправлю SVG-файл поставщику печати.

Но PDF просто должен просто встроить SVG в «виртуальную бумагу», как это решает проблемы RIP? @jiggunjer PDF использует совершенно другую структуру кода, чем SVG. PDF основан на постскриптуме, svg - нет. Сохранение в формате PDF не "встраивает svg в виртуальную бумагу". Это другая база кода. Я вижу, я думал, что родной svg был сохранен подобно тому, как внедрено растровое изображение. Но теперь я понимаю, что есть преобразование в пути PDF. Это без потерь или могут быть вариации в зависимости от реализации PDF-конвертер? Например, будет ли Inkscape создавать тот же pdf для данного svg, что и ghostscript? Я не могу комментировать Inkscape. Я могу вам сказать, что большинство процессоров растровых изображений (RIP), используемых для коммерческой печати, вероятно, захлебнется SVG-изображением. Они не будут понимать кодовую базу. PDF по сути является программным RIP. Поэтому, как правило, когда вы сохраняете что-то в формате PDF, код переписывается / структурируется с учетом результатов, аналогично тому, как аппаратный RIP обрабатывает изображения. По сути, приложение, способное выводить как SVG, так и PDF, должно иметь внутренние параметры преобразования для настройки вывода на основе формата, а SVG является совершенно неподходящим форматом для коммерческой печати.

Я использовал abcPDF для программного преобразования сгенерированного SVG в PDF для печати. Прошло около 4 лет, но я не могу представить, что поддержка этого в библиотеке уменьшилась бы.

Inkscape может конвертировать файлы SVG в PDF и EPS с помощью командной строки. Google "SVG для EPS командной строки". Это было бы хорошим решением для графики, предназначенной как для Интернета, так и для печати.

Просто имейте в виду, что хотя это должно работать в Linux, Inkscape через командную строку на Mac несколько не работает (возможно, придется скомпилировать Inkscape самостоятельно или изменить ссылку на файл внутри .app)

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

Можете ли вы объяснить, почему вы считаете, что изменение растрового изображения может быть полезным? Я бы предпочел векторный формат.

Вся промышленность (лазерные резцы, фрезерные станки и т. Д.) Полагается на «выполнение физической работы» с DXF, который Drawing Exchange Format может быть преобразован в JSON AST (множество библиотек для этой цели), который может быть точно преобразован в SVG; поэтому нет никаких причин, мешающих использовать SVG для печати.

Одним из важнейших атрибутов SVG для этой цели является то, viewBox= что указывает размеры чертежа в реальном мире. viewBox= должно соответствовать width= и height= , или вы получите обрезанную и масштабированную печать. Вы должны предоставить viewBox= атрибут при экспорте и требовать его при импорте.

Тем не менее, вы можете столкнуться с проблемами с SVG, но это не будет ошибкой SVG: есть много глючных драйверов / приложений.

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

Я использую Google Chrome для просмотра 1178x5408 .файл SVG. Она включает в себя много небольших "subgraphics" (скриншоты диалогов, Соединенных стрелками .. подумайте "волшебник"), все это создано graphviz.

теперь я хочу напечатать его правильно. Для меня важно не масштабировать все это до одного листа бумаги, так как тогда я больше ничего не вижу на маленьких скриншотах.

Каковы мои лучшие варианты?

Я предлагаю вам использовать Inkscape, чтобы открыть файл SVG и распечатать его оттуда. Он имеет гораздо лучшие варианты печати, чем Chrome для SVG.

Shift + Ctrl + D вы получите параметры документа:

просто нужно было решить это сегодня. Я использовал Inkscape Print и печатал в PDF-файл (что является стандартной функцией в Linux; я не знаю о других платформах), а затем я использовал pdfposter разбить на страницы:

перевод: используйте страницы формата A4 для создания плаката формата A3.

ок, я использовал wkhtmltopdf получить разумное, хороший смотреть .pdf из этого .svg:

Я просто имел некоторый успех со следующими шагами:

откройте SVG в Inkscape. Я запускаю версию 0.48 для Windows.
экспорт в PDF. Я использовал настройки по умолчанию.
открыть PDF в Foxit Reader.
печать; в разделе" обработка печати "в раскрывающемся списке" Тип масштабирования "выберите параметр"большие страницы плитки".

После выше, мой SVG, кажется, вероятно, печатать на 13 на 10 размер письма страницы.

обновление - у меня были некоторые трудности с выше; некоторые из "плиточных" страниц не печатались, но не всегда одни и те же страницы, поэтому я подозреваю, что тонкая проблема с тем, как Foxit Reader печатает плиточные страницы. Вот альтернативные шаги, которые я просто следовал, которые работали без проблем:

откройте SVG в Inkscape.
экспорт в PDF.
открыть PDF в Foxit Reader.
печать; в разделе " печать Обработка "Раздел, для выпадающего "тип масштабирования", выберите опцию "плитка большие страницы",и в принтере ("имя") выберите "Foxit Reader PDF Printer".
введите имя нового создаваемого PDF со страницей для каждого 'плиточные' страница в оригинальном PDF.
в Foxit Reader новый PDF-файл с мозаичными страницами должен открываться автоматически; этот PDF-файл может быть напечатан нормально, и никакие страницы не должны быть пропущены.

после того, как вы получили PDF, вы сможете легко распечатать его из Acrobat . По крайней мере, теперь с PDF мы знаем разные способы надежно напечатайте один файл больш-размера на множественные листы бумаги (письмо или A4 или A3) используя общее назначение "posterize".

возможно, такая функция "печать плаката" также доступна из Inkscape (который может открывать и печатать SVG напрямую), но я не уверен, что сверху моей головы.

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

выберите элементы, которые нужно поместить, например, A3, и скопируйте их в новый документ. Файл / Свойства, выберите A3, книжный или альбомный.
установите элементы вместе, как вы хотите.
должен быть ярлык для делать это постепенно с помощью мыши, но я сделал это так: Выберите их все, Объект / преобразования, вкладку масштаб, "масштаб пропорционально" и попробуйте значение. Если один не удается, Ctrl + Z и попробуйте другой.
файл / сохранить копию, тип: pdf.

повтор для каждой части, один результирующий PDF для каждого раздела.

открыть с помощью средства просмотра и печати PDF.

в противном случае я бы выбрал Kenny Evitt solution, но вы должны .

Не могу понять, почему BloodPhilia ответ, как есть, в настоящее время является наиболее проголосовавшим.

Файлы в формате SVG «лёгкие» и масштабируемые, а также их можно модифицировать через код. Они обеспечивают высокое качество изображений независимо от размера экрана. С ними можно работать как с обычными изображениями, а также использовать инлайн в HTML. Подробнее о преимуществах формата в статье.

Зачем использовать SVG

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

Масштабирование изображения с сохранением качества pixel perfect

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

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

Возможность модификации

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

Небольшой «вес» файлов

Изображения в формате PNG становятся очень «тяжёлыми», когда вы используете высокое разрешение. Это негативно влияет на скорость загрузки страницы, что в свою очередь может ухудшить результаты сайта в поисковой выдаче.

Файлы в формате JPG чуть «легче» картинок в PNG, но всё равно они слишком «тяжёлые». А изображения SVG представляют собой код, поэтому они «весят» очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.

Доступность

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

Использование SVG: распространённые практики

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

Логотипы и иконки в SVG

Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Чёткость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.

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

Инфографика

Элементы SVG можно динамически обновлять в зависимости от действий пользователей или изменений данных. Поэтому SVG — идеальный вариант для создания интерактивных карт и инфографики.

Визуальные эффекты

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

Анимация

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

Иллюстрации и рисунки

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

Интерфейсы и приложения

SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.

Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт.

Изучайте вёрстку на Хекслете В рамках профессии «Верстальщик» вы изучите HTML5 и CSS3, научитесь пользоваться Flex, Grid, Sass, Bootstrap. В процессе обучения сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.

Использование SVG в HTML и CSS

Файлы в формате SVG можно добавлять на страницы сайта средствами HTML и CSS.

Тег img

Первый способ — URL изображения можно указать в атрибуте src тега img. В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.

Это привычный для большинства разработчиков способ работы с изображениями. Одно из преимуществ — возможность дополнительно использовать тег <a>. С его помощью к изображению можно добавить гиперссылку.

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

Использование SVG в CSS

Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах. Ниже пример кода.

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

Инлайн SVG в HTML

Файл SVG можно открыть в любом текстовом редакторе, скопировать код и добавить его в HTML-разметку страницы. Это называется использованием SVG инлайн. Пример ниже.

Использование SVG в формате кода

В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.

Код SVG можно добавлять в HTML-разметку страницы или писать его в отдельных файлах. Ниже пример создания окружности и прямоугольника с помощью SVG.

Подробнее о работе с простыми фигурами ниже.

Рисуем с помощью SVG: круг

Чтобы нарисовать круг, необходимо указать три атрибута:

Радиус круга — r.
Позицию центра круга по оси x — cx.
Позицию центра круга по оси y — cy.

Код, с помощью которого можно нарисовать круг, можно посмотреть ниже. Цвет линии и фона можно указывать инлайн или отдельно.

Рисуем с помощью SVG: прямоугольник

Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.

Рисуем с помощью SVG: линия

Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии. Код ниже наверняка выглядит понятнее объяснения словами.

Рисуем с помощью SVG: звезда

С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры. Пример кода ниже.

Рисуем с помощью SVG: пути

С помощью элемента можно рисовать ломаные кривые. Они позволяют создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.

Вот пример использования path:

А это пример нескольких линий, созданных с помощью path:

Рисуем с помощью SVG: кривые

Для рисования кривой линии используется команда C. В примере ниже определяются начало кривой, точки смещения и конец кривой.

С помощью команды S можно объединять кривые и создавать сложные формы.

Как работать с текстом с помощью SVG

Формат SVG позволяет работать с текстом. Для этого применяется тег <text> Пример ниже.

Как управлять свойствами шрифта с помощью svg

SVG позволяет управлять следующими свойствами шрифта:

font-family .
font-style .
font-weight .
font-variant .
font-stretch .
font-size .
font-size-adjust .
kerning .
letter-spacing .
word-spacing .
text-decoration .

С помощью тега <tspan> можно выбрать одно или несколько слов в тексте и изменить их свойства.

Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.

Как использовать CSS в SVG

Код CSS можно указывать инлайн в коде SVG. Смотрите пример.

Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.

В CSS можно работать с этим классом.

Вместо заключения: как дела с SVG 2.0

SVG 2.0 активно разрабатывается. Продукт находится в стадии предварительной версии (Candidate Recommendation). Браузеры не полностью поддерживают SVG 2.0. В новой версии добавлены некоторые возможности HTML 5 и WOFF (web open font format). Следить за стадиями разработки SVG 2.0 можно на сайте W3C.

Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях

Эта статья написана по следам создания плагина для чтения SVG файлов для анимационного векторного редактора NanoFL. В ней вы найдёте некоторые особенности того, как устроены файлы SVG изнутри и какие проблемы возникают при их разборе и последующем выводе на HTML5/Canvas средствами JavaScript.

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

Вот обзор того, что может содержать SVG-файл:

Заголовок ( <svg> ).
Определения ( <defs> ) — здесь хранятся описания градиентов и объектов, которые не нужно выводить непосредственно (сразу).
Группа ( <g> ) — это контейнер для рисуемых элементов, на который можно сослаться при необходимости.
Векторная фигура ( <path> ) — набор правил для рисования ("перейти в заданную точку", "нарисовать отрезок из текущей позиции в заданную точку"). Поддерживаются как прямые отрезки, так и кривые Безье 2-го и 3-го порядка, а также дуги окружности.
Тест ( <text> ) — однострочный текст (в SVG нет полноценной поддержки многострочных текстов).
Градиент ( <linearGradient> , <radialGradient> ).
Область отсечения ( <clipPath> ) — задаёт фигуру, которая может использоваться для отсечения при выводе.
Узор ( <pattern> ) — задаёт фигуру, которой можно заливать замкнутые области.
Маска ( <mask> ) — задаёт объект, alpha-значения пикселей которого можно использовать при выводе произвольного объекта.
Фильтр ( <filter> ) — один из предопределённых способов пост-обработки заданного графического элемента (например, его размытие).
Растровая картинка ( <image> ).
Анимация (её поддержка не была реализована в NanoFL и потому не рассматривается в этой статье).

Обычно имеет следующий вид:

xmlns:xlink="http://www.w3.org/1999/xlink" — без этого атрибута мы не сможем ссылаться внутри файла на те или иные его элементы (а это нужно, например, если мы хотим несколько раз вывести одну и ту же фигуру или назначить элементу градиент для заливки);
width/height — довольно важные атрибуты — задают физические размеры холста, на котором будет выводиться изображение; почти всегда их лучше указывать (и лучше в пикселях), иначе некоторые программы не смогут понять, какого размера картинку мы ожидаем получить при растеризации;
viewBox — задаёт координаты и размеры "окна видения"; используется браузерами для позиционирования картинки в области рендеринга (т.е. на холсте), может игнорироваться другими программами.

Группа — это тег-контейнер, внутри которого могут быть практически любые элементы. Используется как правило или для того, чтобы задать некоторые параметры (например, заливку, область отсечения или фильтр) сразу для всех внутренних элементов, или чтобы впоследствии иметь возможность сослаться на эти элементы. Группа напоминает символ в библиотеке редактора, который мы можем использовать несколько раз, причём видоизменяя его при использовании (для того, чтобы сослаться на группу, используется тег <use> ). Ниже приведён пример задания группы и использования ссылок на неё.

Для определения векторных фигур в SVG используется несколько тегов: универсальный <path> и частные <polygon> , <circle> и <rect> . Интересны следующие моменты:

Линии фигур могут пересекаться (что неприемлемо как Flash Pro, так и для NanoFL).
SVG поддерживает два различных метода определения того, какую из получившихся замкнутых областей считать внутренней (и, соответственно, закрашивать):
a) fill-type="nonzero" — из точки внутри области выпускается луч и отдельно считается количество его пересечений с линиями идущими по часовой стрелке и против часовой стрелки; область закрашивается, если полученные числа не совпадают;
b) fill-type="evenodd" — из точки внутри области выпускается луч и считается количество пересечений с линиями, задающими границу; область закрашивается, если количество пересечений нечётно.

Закрашивать замкнутые области в SVG можно произвольным векторным узором. На canvas такое невозможно: Context2D поддерживает создание pattern-ов, однако, в их качестве предлагается использовать растровые изображения, а не векторные. Обходным манёвром здесь может быть растеризация вектора на canvas в памяти с последующей заливкой им заданной области. Однако, в общем случае, это приведёт к серьёзной потере производительности (т.к. невозможно растрировать узор заранее и использовать везде из-за незнания масштаба заливаемого объекта). Поэтому, помня о том, что узоры довольно редко используются в реальных художественных векторных изображениях, было решено отказаться от их поддержки в NanoFL.

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

Читайте также: