Base64 и SVG

Преобразование svg в base64

0 Serg [2020-01-11 18:09:00]

SVG, который был создан программно, не преобразовывается в base64 правильно.

В моем приложении у меня есть служба, которая получает ответ с g-элементом, а затем помещает в созданный svg-элемент и конвертирует его в base64, но если я попытаюсь открыть ссылку, то обнаружим, что svg не отображает страница.

javascript base64 svg

3 ответа

2 Решение seahorsepip [2020-01-11 18:22:00]

Разница между @guest271314 и моим ответом:

@guest271314 его ответ:

Оберните элемент g внутри элемента svg, чтобы убедиться, что браузер отображает g-элемент onload.

Заставляет элемент svg внутри #test отображать элемент g, так как элемент g не был обработан onload.

Лучший ответ в этом случае: @guest271314

Причина: элемент g должен находиться внутри элемента svg в действительном html.

Когда следует использовать мой ответ?
В случае, когда элемент g не является элементом в документе html.

Вы не закрыли test() с помощью>. Код ниже возвращает закодированный base64 svg: https://jsfiddle.net/seahorsepip/6sra5c5L/1/

svg проблема рендеринга — это то, с чем я столкнулся раньше, вот исправление с линией jquery: https://jsfiddle.net/seahorsepip/6sra5c5L/3/

Я не знаю эквивалента javascript для кода jQuery, который я добавил, я пытался его написать, но он не работал:/

Base64 и SVG

17590 просмотра

5 ответа

99 Репутация автора

У меня есть файл, содержащий изображение SVG, который закодирован в base64 (data-uri). Файл начинается с

данные: изображение / SVG + XML; base64, НЗП .

Как декодировать это в файл .svg в Linux?

Ответы (5)

3 плюса

55554 Репутация автора

Вы можете использовать онлайн-декодер base64, такой как http://www.base64decode.org/

1 плюс

46398 Репутация автора

Вы можете использовать, например base64 —decode . И вам, вероятно, нужно снять data:image/svg+xml;base64, часть перед передачей.

26 плюса

1590 Репутация автора

Вы можете скопировать / вставить строку (и data:image т. Д. В комплекте) в строке URL современного браузера; он расшифрует его для вас, затем вы можете просто сохранить страницу как SVG.

Автор: Iazel Размещён: 20.11.2015 04:17

плюса

31 Репутация автора

плюса

3079 Репутация автора

Чтобы ответить на вопрос ОП:

Как декодировать это в файл .svg в Linux?

Поскольку в linux по умолчанию установлен python, я предлагаю использовать скрипт python.

Фоновый градиент с помощью SVG :: Хранитель заметок

Фоновый градиент с помощью SVG

Замечательный сервис Ultimate CSS Gradient Generator наряду с CSS3 градиентами для всех браузеров создает SVG файл для IE9. Он внедряется в CSS с помощью Data URI в base64 кодировке.

Это сервис всегда создает правила так, чтобы градиент заполнял весь блок. Если поправить CSS3 свойства не составит для градиента фиксированного размера, то с SVG придется проделать некоторые манипуляции.

Раскодируем base64

Затем декодируем последовательность символов, которую нам выдал генератор. Я умышленно обрезал часть данных, чтобы команды не затерялись среди них.

Файл g.svg .будет содержать SVG и его можно будет отредактировать в любом текстовом редакторе.

Для декодирования можно воспользоваться любым online-сервисом, коих в интернете великое множество.

Задаем размеры изображения

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

Цукерберг рекомендует:  Pascal - программа в паскале

Важно всегда явно задавать единицы измерения величин даже если это пикселы.

Кодируем SVG в base64

Получившийся в результате набор символов копируем из консоли в CSS файл вместо исходного. После этого нужно удалить все переносы строк, которые могли образоваться внутри закодированных данных. Формат base64 игнорирует пробельные символы, но внутри Data URI пробельные символы недопустимы.

Настраиваем параметры фона

Так как фон уже не заполняет весь блок целиком, то нужно не забыть настроить его позиционирование и повторение.

JSFiddle

Diff between the saved and locally drafted f >

Editor layout

General

Indent with tabs

Code hinting (autocomplete) (beta)

Behavior

Only auto-run code that validates

Auto-save code (bumps the version)

Auto-close HTML tags

Clear console on run

Live code validation

Highlight matching tags

Boilerplates

Show boilerplates bar less often

Save anonymous (public) fiddle?

— Be sure not to include personal data
— Do not include copyrighted material

Log in if you’d like to delete this fiddle in the future.

Fork anonymous (public) fiddle?

— Be sure not to include personal data
— Do not include copyrighted material

Log in if you’d like to delete this fiddle in the future.

Корректно ли использовать SVG, закодированные в base64?

Если вы говорите об использовании схемы data:uri , то вопрос тут не в «корректности», а в производительности, а также том, для чего вообще вы это делаете.
Собственно, вероятность того, что это не будет работать, определяется а) поддержкой data:uri самим browser-ом caniuse.com/#feat=datauri и б) поддержкой SVG caniuse.com/#feat=svg
Вопрос «где хранится» — непонятен. Если вы уже вставили закодированную картинку в CSS или HTML, то там она и хранится.
Имейте в виду, что если вы не предъявляете каких-то специальных требований к работе страниц, лучше не использовать это, потому что оно только сильнее все тормозит.
Специальные требования могут включать в себя полную переносимость страницы (т.е. отсутствие внешних ссылок, когда абсолютно все, от самого HTML до скриптов, стилей и картинок, хранится в одном файле), какие-то особые условия, связанные с HTTP-запросами (экзотические настройки сервера, который отдает один запрос одному клиенту, но по широкому каналу, например) и так далее. Иногда это можно использовать для каких-то совсем маленьких элементов, когда есть риск, что сервер отдаст их последними, а без них рушится все отображение.

Я эти фокусы использовал в свое время только для формирования бланков, которые пользователь мог бы сохранять и смотреть оффлайн. Некая замена PDF.

Подскажите (фоновый SVG через base64 и ресайз)

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Похожие публикации

у svg должно быть три состояния обычное, при наведении, при нажатии
думаю как это сделать
Vне бы хотелось его вставить в html разметку, а не просто с помощью bsckground-position. Т.к. я хочу анимации при наведении (transition).
И я могу менять цвет обводки с помощью css-свойства fill.
Но есть еще одно состояние когда картинка полностью закрашена. Как сделать чтобы то же свг закрашивалось полностью (например при добавлении класса)?
У меня не получается просто добавить css свойство для этого

Probably Don’t Base64 SVG

Easily manage projects with monday.com

Perhaps you’ve heard of data URIs. It’s a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image/png ), semicolon, then the data of that file.

Цукерберг рекомендует:  Mac oc - Можно ли установить visual studio на mac oc

For a raster image like a PNG, the data of that image needs to be in base64 format. I’m not a huge expert here, but as far as I understand, base64 is safe for use in something like HTML or CSS because it only uses 64 characters known to be safe in those formats.

On the left, the data of a PNG, which includes characters that have the potential to screw up HTML. On the right, that same image base64 encoded with all safe characters.

Probably better Stack Overflow answer by Dave Markle:

You never know — some protocols may interpret your binary data as control characters (like a modem), or your binary data could be screwed up because the underlying protocol might think that you’ve entered a special character combination (like how FTP translates line endings).

So to get around this, people encode the binary data into characters. Base64 is one of these types of encodings.

Base64 looks like gibberish, and we often associate gibberish with compression on the web. But this gibberish isn’t compression, it’s actually a bit bigger than the original because, to quote Jon Skeet on the same Stack Overflow thread:

It takes 4 characters per 3 bytes of data, plus potentially a bit of padding at the end.

I’m not sure how gzip factors into it though. But what I’m getting at here is how SVG factors into this.

You can use data URIs for SVG too.

For SVG, you don’t have to convert the data into base64. Again, not an expert here, but I think the SVG syntax just doesn’t have any crazy characters in it. It’s just XML like HTML is, so it’s safe to use in HTML.

You can leave the encoding in UTF-8, and drop the syntax right in there! Like this:

So because we can do that, and we know that base64 often increases the size, might as well do that right? Yep. As a side benefit, the syntax left alone does gzip better, because it’s far more repetitive than base64 is. Say you wanted two versions of an icon, one red, one yellow. You can use the same SVG syntax duplicated just change the fill color. Gzip will eat that for breakfast. Credit to Todd Parker for that tip, and that’s also the approach of Grunticon, which data URI’s SVG in UTF-8 into CSS.

A Test

To test this out, I downloaded three SVG icons from IcoMoon.

cog.svg — 1,026 bytes
play.svg — 399 bytes
replay.svg — 495 bytes

I ran them through SVGO just so they are nicely optimized and kinda ready for use as a data URI (whitespace removed, although I guess not strictly necessary).

cog.svg — 685 bytes
play.svg — 118 bytes
replay.svg — 212 bytes

Then I ran those through a base64 converter.

cog.svg — 916 bytes — 133% of the original size
play.svg — 160 bytes — 136% of the original size
replay.svg — 283 bytes — 134% of the original size

So that makes sense, right? If it’s 4 characters for every 3 bytes, that’s 133% bigger, with the variation coming from uneven lengths and thus padding.

Anyway, maybe this is all super obvious. But it just seems to me if you’re going to use a data URI for SVG there is no reason to ever base64 it.

Props to Matt Flaschen for his email a few months ago that highlighted this issue for me.

Цукерберг рекомендует:  Демонстрация плагина fcbkListSelection

UPDATE: on IE

There is a lot of talk in the comments about IE 10/11/Edge not supporting this. It does, it’s just finicky. Here’s a reduced test case that works in those version of IE. Note the second example, which is URL encoded, works. The trick is not specifying an encoding type at all.

UPDATE: «Optimized URL-encoded»

Taylor Hunt investigated a bit deeper and found that you can sweak out a bit more optimization by not encoding stuff like spaces and single quotes. Example:

Base64 и SVG

Convert SVGs to images and output them to stdout as base64 (PhantomJS)

If you want to convert SVG to image from some other script like (PHP, Python, . ) or for whatever reason you need an image to be encoded in base64, you can use this.

v1.0.6 You can specify additional css and defs options to style your SVGs.

Convert svg to base64 encoded image

Convert svg to base64 encoded image with added css

Convert svg to base64 encoded image with gradient (css+defs)

You can run this from PHP for example:

  1. svg: svg String
  2. options
    • scale‘: scale factor (default: 1)
    • >

Each base64 image string is outputted in one row of stdout. If id for the image is set, id and base64 image data are delimited with space char.

id base64_image
id base64_image
.

Преобразование svg в base64

0 Serg [2020-01-11 18:09:00]

SVG, который был создан программно, не преобразовывается в base64 правильно.

В моем приложении у меня есть служба, которая получает ответ с g-элементом, а затем помещает в созданный svg-элемент и конвертирует его в base64, но если я попытаюсь открыть ссылку, то обнаружим, что svg не отображает страница.

javascript base64 svg

3 ответа

2 Решение seahorsepip [2020-01-11 18:22:00]

Разница между @guest271314 и моим ответом:

@guest271314 его ответ:

Оберните элемент g внутри элемента svg, чтобы убедиться, что браузер отображает g-элемент onload.

Заставляет элемент svg внутри #test отображать элемент g, так как элемент g не был обработан onload.

Лучший ответ в этом случае: @guest271314

Причина: элемент g должен находиться внутри элемента svg в действительном html.

Когда следует использовать мой ответ?
В случае, когда элемент g не является элементом в документе html.

Вы не закрыли test() с помощью>. Код ниже возвращает закодированный base64 svg: https://jsfiddle.net/seahorsepip/6sra5c5L/1/

svg проблема рендеринга — это то, с чем я столкнулся раньше, вот исправление с линией jquery: https://jsfiddle.net/seahorsepip/6sra5c5L/3/

Я не знаю эквивалента javascript для кода jQuery, который я добавил, я пытался его написать, но он не работал:/

Base64 и SVG

17590 просмотра

5 ответа

99 Репутация автора

У меня есть файл, содержащий изображение SVG, который закодирован в base64 (data-uri). Файл начинается с

данные: изображение / SVG + XML; base64, НЗП .

Как декодировать это в файл .svg в Linux?

Ответы (5)

3 плюса

55554 Репутация автора

Вы можете использовать онлайн-декодер base64, такой как http://www.base64decode.org/

1 плюс

46398 Репутация автора

Вы можете использовать, например base64 —decode . И вам, вероятно, нужно снять data:image/svg+xml;base64, часть перед передачей.

26 плюса

1590 Репутация автора

Вы можете скопировать / вставить строку (и data:image т. Д. В комплекте) в строке URL современного браузера; он расшифрует его для вас, затем вы можете просто сохранить страницу как SVG.

Автор: Iazel Размещён: 20.11.2015 04:17

плюса

31 Репутация автора

плюса

3079 Репутация автора

Чтобы ответить на вопрос ОП:

Как декодировать это в файл .svg в Linux?

Поскольку в linux по умолчанию установлен python, я предлагаю использовать скрипт python.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих