От автора: ранее мы рассмотрели, что такое SVG-изображения и почему они отлично подходят для использования в веб-приложениях / на сайтах. В этой статье мы рассмотрим различные способы того, как использовать SVG в браузерах. Данными методами мы располагаем в HTML, CSS и JavaScript. Это будет небыстро, так что возьмите немного содовой (или другой предпочтительный напиток) и поехали.
Много кода впереди
В следующих разделах мы рассмотрим много разметки и кода, которые освещают различные способы отображения SVG на веб-странице. Результатом всех этих подходов будет то, что выглядит следующим образом:
Если вы хотите продолжить, все, что вам нужно сделать, это скопировать / вставить каждый пример в новый HTML-документ и просмотреть его в своем браузере. Вот и все. Теперь, без дальнейших промедлений, давайте приступим.
SVG как обычное изображение
Самый простой способ использовать SVG — это обрабатывать его как изображение — подобно тому, как мы работаем с файлами JPG, PNG и GIF. Для использования его в HTML мы всегда можем положиться на нашего верного старого друга, тег img:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>SVGs and the IMG Tag</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } </style> </head> <body> <div class="rocketContainer"> <img alt="rocket" width=50 src="//www.kirupa.com/images/rocket.svg" /> </div> </body> </html> |
Если мы хотим отобразить SVG с помощью CSS, есть несколько свойств, которые мы можем использовать. Наиболее распространенным из них обычно является background-image:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>SVGs in CSS</title> <style> .rocket { width: 100px; height: 100px; background-image: url(//www.kirupa.com/images/rocket.svg); background-color: #FFEB3B; background-size: 50px; background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="rocket"></div> </body> </html> |
Другой подход к отображению SVG включает тег object:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <title>SVG files and the Object tag!</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } .rocketContainer object { width: 50px; } </style> </head> <body> <div class="rocketContainer"> <object type="image/svg+xml" data="//www.kirupa.com/images/rocket.svg"> it's a rocketship! </object> </div> </body> </html> |
Во всех этих случаях вы должны помнить, что размер SVG будет таким, каким были размеры, использованные при создании / сохранении изображения. Это означает, что у вас может быть очень большое изображение или очень маленькое, если вы явно не определите нужный размер. Вы можете определить размер, используя CSS (что является моим предпочтительным подходом) или установив непосредственно в HTML атрибут width или height.
Встроенные SVG
Если вы когда-нибудь рассматривали, что именно составляет SVG-файл (просто откройте его в своем любимом текстовом редакторе или редакторе кода), вы заметите, что это куча странных скобок и текста, который похож на HTML-контент:
На то есть причина. И SVG, и HTML основаны на XML. Для того, чтобы использовать прямое / встроенное представление SVG-изображения в документе, все, что нам нужно сделать, это скопировать / вставить весь SVG-контент из файла SVG в DOM:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <title>SVGs Inline in HTML</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } .rocketContainer svg { width: 50px; } </style> </head> <body> <div class="rocketContainer"> <svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 36 36"> <path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z" /> <path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z" /> <circle fill="#FFCC4D" cx="8.999" cy="27" r="4" /> <path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z" /> <path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z" /> <path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z" /> </svg> </div> </body> </html> |
Вы также можете использовать встроенные SVG в CSS. Есть несколько моментов, которые вам нужно учитывать, и вы можете увидеть их в следующем примере, где мы указываем значение свойства background-image:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>SVGs Inline in CSS</title> <style> .rocket { width: 100px; height: 100px; background-image: url("data:image/svg+xml,%3Csvg xmlns='//www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23A0041E' d='M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z'/%3E%3Cpath fill='%23FFAC33' d='M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z'/%3E%3Ccircle fill='%23FFCC4D' cx='8.999' cy='27' r='4'/%3E%3Cpath fill='%2355ACEE' d='M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z'/%3E%3Cpath d='M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z'/%3E%3Cpath fill='%23A0041E' d='M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z'/%3E%3C/svg%3E"); background-color: #FFEB3B; background-size: 50px; background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="rocket"></div> </body> </html> |
Есть три вещи, которые мы должны указать при использовать встроенного SVG в качестве значения свойства CSS:
Значение в качестве типа данных CSS url: url («….»);
Начальные символы: data:image/svg+xml,
Содержимое встроенного SVG, как url-encoded: %3Csvg xmlns=’//www.w3.org/2000/svg’ viewBox=’0 0 36 36’%3E%3Cpath fill=’%23A0041E’ d=’M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z’/%3E%3Cpath fill=’%23FFAC33′ d=’M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z’/%3E%3Ccircle fill=’%23FFCC4D’ cx=’8.999′ cy=’27’ r=’4’/%3E%3Cpath fill=’%2355ACEE’ d=’M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z’/%3E%3Cpath d=’M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z’/%3E%3Cpath fill=’%23A0041E’ d=’M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z’/%3E%3C/svg%3E
Собрав все это вместе, вы получаете секретный соус для отображения встроенного SVG, как части значения свойства CSS. Сложная задача здесь — взять стандартную разметку SVG и закодировать ее, чтобы она работала в CSS. Сервис URL-Encoder for SVG может выполнить эту хитрую часть, так что вы можете использовать его, вместо того, чтобы пытаться понять это и вручную заменять символы.
SVG как URI данных
То, что мы только что рассмотрели со встроенным представлением CSS — это особенная вещь. SVG представляется в общем формате, известном как URI данных. Блок данных, который мы предоставляем в URI данных — это возможность применить еще несколько вариантов SVG-контента. Один из них — полностью URL-кодированная версия, которую мы рассматривали ранее для CSS. Мы можем повторить это и для HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>SVGs as Data URIs in HTML</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } </style> </head> <body> <div class="rocketContainer"> <img alt="rocket" width=50 src="data:image/svg+xml,%3Csvg xmlns='//www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23A0041E' d='M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z'/%3E%3Cpath fill='%23FFAC33' d='M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z'/%3E%3Ccircle fill='%23FFCC4D' cx='8.999' cy='27' r='4'/%3E%3Cpath fill='%2355ACEE' d='M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z'/%3E%3Cpath d='M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z'/%3E%3Cpath fill='%23A0041E' d='M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z'/%3E%3C/svg%3E" /> </div> </body> </html> |
Другое представление — это SVG-данные в формате base64. В версии с кодировкой URL результирующие данные выглядят немного более удобочитаемыми. Когда вы преобразуете любые данные SVG в формат base64, то, что вы получаете, выглядит как самый безопасный в мире пароль:
Результатом преобразования обычного SVG в версию base64 является просто странный набор букв и цифр… с которыми браузер знает, что делать. Вот как это выглядит в HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>SVGs as base64 Data URIs in HTML</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } </style> </head> <body> <div class="rocketContainer"> <img alt="rocket" width=50 src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0EwMDQxRSIgZD0iTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnoiLz48cGF0aCBmaWxsPSIjRkZBQzMzIiBkPSJNLjk3MyAzNXMtLjAzNi03Ljk3OSAyLjk4NS0xMVMxNSAyMS4xODcgMTUgMjEuMTg3IDE0Ljk5OSAyOSAxMS45OTkgMzJjLTMgMy0xMS4wMjYgMy0xMS4wMjYgM3oiLz48Y2lyY2xlIGZpbGw9IiNGRkNDNEQiIGN4PSI4Ljk5OSIgY3k9IjI3IiByPSI0Ii8+PHBhdGggZmlsbD0iIzU1QUNFRSIgZD0iTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnoiLz48cGF0aCBkPSJNMjYuOTk5IDVjLTEuNjIzIDAtMy4wMTMuOTcxLTMuNjQxIDIuMzYuNTAyLS4yMjcgMS4wNTUtLjM2IDEuNjQxLS4zNiAyLjIwOSAwIDQgMS43OTEgNCA0IDAgLjU4Ni0uMTMzIDEuMTM5LS4zNTkgMS42NCAxLjM4OS0uNjI3IDIuMzU5LTIuMDE3IDIuMzU5LTMuNjQgMC0yLjIwOS0xLjc5MS00LTQtNHoiLz48cGF0aCBmaWxsPSIjQTAwNDFFIiBkPSJNOCAyOHMwLTQgMS01IDEzLjAwMS0xMC45OTkgMTQtMTAtOS4wMDEgMTMtMTAuMDAxIDE0UzggMjggOCAyOHoiLz48L3N2Zz4=" /> </div> </body> </html> |
Вот что вы увидите в CSS, когда мы назначим этот base64 контент для свойства background-image:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>SVGs Inline as Base64 in CSS</title> <style> .rocket { width: 100px; height: 100px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0EwMDQxRSIgZD0iTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnoiLz48cGF0aCBmaWxsPSIjRkZBQzMzIiBkPSJNLjk3MyAzNXMtLjAzNi03Ljk3OSAyLjk4NS0xMVMxNSAyMS4xODcgMTUgMjEuMTg3IDE0Ljk5OSAyOSAxMS45OTkgMzJjLTMgMy0xMS4wMjYgMy0xMS4wMjYgM3oiLz48Y2lyY2xlIGZpbGw9IiNGRkNDNEQiIGN4PSI4Ljk5OSIgY3k9IjI3IiByPSI0Ii8+PHBhdGggZmlsbD0iIzU1QUNFRSIgZD0iTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnoiLz48cGF0aCBkPSJNMjYuOTk5IDVjLTEuNjIzIDAtMy4wMTMuOTcxLTMuNjQxIDIuMzYuNTAyLS4yMjcgMS4wNTUtLjM2IDEuNjQxLS4zNiAyLjIwOSAwIDQgMS43OTEgNCA0IDAgLjU4Ni0uMTMzIDEuMTM5LS4zNTkgMS42NCAxLjM4OS0uNjI3IDIuMzU5LTIuMDE3IDIuMzU5LTMuNjQgMC0yLjIwOS0xLjc5MS00LTQtNHoiLz48cGF0aCBmaWxsPSIjQTAwNDFFIiBkPSJNOCAyOHMwLTQgMS01IDEzLjAwMS0xMC45OTkgMTQtMTAtOS4wMDEgMTMtMTAuMDAxIDE0UzggMjggOCAyOHoiLz48L3N2Zz4="); background-color: #FFEB3B; background-size: 50px; background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="rocket"></div> </body> </html> |
Мы также можем назначить base64 версию SVG тегу object:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <title>SVGs as base64 Data URIs for an Object in HTML</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } .rocketContainer object { width: 50px; } </style> </head> <body> <div class="rocketContainer"> <object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0EwMDQxRSIgZD0iTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnoiLz48cGF0aCBmaWxsPSIjRkZBQzMzIiBkPSJNLjk3MyAzNXMtLjAzNi03Ljk3OSAyLjk4NS0xMVMxNSAyMS4xODcgMTUgMjEuMTg3IDE0Ljk5OSAyOSAxMS45OTkgMzJjLTMgMy0xMS4wMjYgMy0xMS4wMjYgM3oiLz48Y2lyY2xlIGZpbGw9IiNGRkNDNEQiIGN4PSI4Ljk5OSIgY3k9IjI3IiByPSI0Ii8+PHBhdGggZmlsbD0iIzU1QUNFRSIgZD0iTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnoiLz48cGF0aCBkPSJNMjYuOTk5IDVjLTEuNjIzIDAtMy4wMTMuOTcxLTMuNjQxIDIuMzYuNTAyLS4yMjcgMS4wNTUtLjM2IDEuNjQxLS4zNiAyLjIwOSAwIDQgMS43OTEgNCA0IDAgLjU4Ni0uMTMzIDEuMTM5LS4zNTkgMS42NCAxLjM4OS0uNjI3IDIuMzU5LTIuMDE3IDIuMzU5LTMuNjQgMC0yLjIwOS0xLjc5MS00LTQtNHoiLz48cGF0aCBmaWxsPSIjQTAwNDFFIiBkPSJNOCAyOHMwLTQgMS01IDEzLjAwMS0xMC45OTkgMTQtMTAtOS4wMDEgMTMtMTAuMDAxIDE0UzggMjggOCAyOHoiLz48L3N2Zz4="> it's a rocketship! </object> </div> </body> </html> |
В случаях изображений, CSS и объектов обратите внимание на то, как вы указываете значение в кодировке base64. Это одинаково для каждого случая, поэтому мы можем обобщить этот подход следующим образом:
|
1 |
"data:image/svg+xml;base64,[base64blob]" |
Просто замените текст [base64blob] фактическим значением в кодировке base64.
Другие форматы кодирования!
Помимо base64 и полнофункционального url-кодирования, существуют другие способы кодирования SVG и обеспечения его работы как части URI данных.
SVG и JavaScript
Теперь все становится еще интереснее. Из-за тесной связи между JavaScript и DOM все подходы, которые мы рассматривали ранее, могут быть реализованы с использованием кода. Независимо от того, создаете ли вы весь HTML-элемент (с определенным SVG) и добавляете его в DOM, или вы просто устанавливаете значения для атрибута src, атрибута data или свойства background-image по отдельности, для этого необходимы некоторые базовые манипуляции с DOM. Давайте рассмотрим, как все это будет выглядеть в различных общих сценариях.
Указание на файл SVG в HTML
Сначала давайте рассмотрим прямой случай использования JavaScript для загрузки файла SVG в элемент изображения на странице:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>SVG, Image Source, and JavaScript</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } .rocketContainer img { width: 50px; } </style> </head> <body> <div class="rocketContainer"> <img/> </div> <script> var imageElement = document.querySelector(".rocketContainer img"); imageElement.src = "//www.kirupa.com/images/rocket.svg"; </script> </body> </html> |
В этом случае у нас в HTML есть пустой элемент изображения, в котором мы затем указываем файл SVG. Если у вас нет пустого элемента изображения и вам нужно создать его в JS, вы можете сделать что-то подобное:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <title>SVG, Dynamic Image Source, and JavaScript</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } .rocketContainer img { width: 50px; } </style> </head> <body> <div class="rocketContainer"> </div> <script> var container = document.querySelector(".rocketContainer"); var imageElement = document.createElement("img"); imageElement.src = "//www.kirupa.com/images/rocket.svg"; container.appendChild(imageElement); </script> </body> </html> |
Оба подхода довольно гибкие. Хотя вы не всегда можете захотеть писать весь этот код для загрузки только одного изображения, но вы можете расширить его до массива путей изображений SVG и динамически назначать источник изображения сразу нескольким элементам. Все ограничено только вашим воображением.
Указание на файл SVG в CSS
Следующий подход — тот, где мы указываем файл SVG в CSS. Мы продолжим использовать свойство background-image:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>SVGs in CSS via JavaScript</title> <style> .rocket { width: 100px; height: 100px; background-color: #FFEB3B; background-size: 50px; background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="rocket"></div> <script> var rocketElement = document.querySelector(".rocket"); rocketElement.style.backgroundImage = `url(//www.kirupa.com/images/rocket.svg)`; </script> </body> </html> |
То, что мы указываем в JavaScript в качестве значения для свойства backgroundImage, почти идентично тому, что мы ранее указали непосредственно в CSS. Это удобно, правда?
Указание встроенного SVG в HTML
Во многих случаях, даже если вы находитесь на территории JavaScript, вы все равно будете иметь дело с данными SVG в их необработанном XML-подобном виде. Вот как в этой ситуации вы можете все равно отобразить SVG:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>Inline SVGs Specified via JavaScript</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } .rocketContainer svg { width: 50px; } </style> </head> <body> <div class="rocketContainer"> </div> <script> var rocketSVG = `<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z"/><path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z"/><circle fill="#FFCC4D" cx="8.999" cy="27" r="4"/><path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z"/><path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z"/><path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z"/></svg>`; var container = document.querySelector(".rocketContainer"); container.innerHTML = rocketSVG; </script> </body> </html> |
Поскольку встроенный SVG является элементом DOM в форме строки или текста, мы можем избежать установки параметра innerHTML для любого родительского элемента, внутри которого хотим отображать SVG.
Указание встроенного SVG в CSS
Ранее мы рассмотрели базовый подход для определения встроенного SVG в CSS в формате URI данных. Частично это связано с кодированием SVG в URL-кодировке. Мы делаем нечто подобное и в скрипте JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>JavaScript, SVG, and CSS!</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; background-size: 50px; background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="rocketContainer"> </div> <script> var rocketSVG = `<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z"/><path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z"/><circle fill="#FFCC4D" cx="8.999" cy="27" r="4"/><path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z"/><path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z"/><path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z"/></svg>`; var encodedSVG = encodeURIComponent(rocketSVG); var container = document.querySelector(".rocketContainer"); container.style.backgroundImage = `url("data:image/svg+xml,${encodedSVG}")`; </script> </body> </html> |
Чего мы не делаем, так это не предоставляем SVG в его URL-кодированном формате с самого начала. Это не разумно ожидать, когда SVG может поступить из различных мест (например, веб-запрос), где мы не можем контролировать кодировку. Вместо этого мы можем положиться на встроенный метод encodeURIComponent для обработки SVG и преобразования его в более удобоваримый формат с URL-кодировкой. После того, как мы выполним это преобразование, дальше нам нужно будет установить свойство backgroundImage для элемента, в котором мы хотим отображать SVG — аналогично тому, что мы делали несколько раз в до этого.
Base64 версии SVG
Другой способ указать SVG как в HTML, так и в CSS — воспользоваться маршрутом в кодировке base64. Чтобы перейти от обычного SVG к base64 версии, у вас есть функция btoa. В HTML, если нам нужно установить источник элемента изображения, это может выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>JavaScript and a base64 SVG in HTML</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; display: flex; align-content: center; justify-content: center; } </style> </head> <body> <div class="rocketContainer"> <img alt="rocket" width=50/> </div> <script> var rocketSVG = `<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z"/><path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z"/><circle fill="#FFCC4D" cx="8.999" cy="27" r="4"/><path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z"/><path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z"/><path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z"/></svg>`; var base64version = window.btoa(rocketSVG); var imgElement = document.querySelector(".rocketContainer img"); imgElement.src = `data:image/svg+xml;base64,${base64version}`; </script> </body> </html> |
Обратите внимание, что мы сохраняем base64 версию SVG в переменной base64version, которая затем передается в формат URI данных для свойства src элемента image. Это не слишком отличается от случая CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title>JavaScript, Base64-encoded SVG, and CSS</title> <style> .rocketContainer { background-color: #FFEB3B; width: 100px; height: 100px; background-size: 50px; background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="rocketContainer"> </div> <script> var rocketSVG = `<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#A0041E" d="M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z"/><path fill="#FFAC33" d="M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z"/><circle fill="#FFCC4D" cx="8.999" cy="27" r="4"/><path fill="#55ACEE" d="M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z"/><path d="M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z"/><path fill="#A0041E" d="M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z"/></svg>`; var base64version = window.btoa(rocketSVG); var container = document.querySelector(".rocketContainer"); container.style.backgroundImage = `url(data:image/svg+xml;base64,${base64version})`; </script> </body> </html> |
Мы по-прежнему используем функцию btoa, чтобы превратить SVG в версию с кодировкой base64, которую мы можем затем указать, в данном случае, для CSS-свойства backgroundImage. На этом все…
Заключение
Я сказал, что мы рассмотрим миллиард способов отображения SVG на страницах, и я уверен, что если мы перечислим все возможные варианты, то подойдем довольно близко к этой цифре. Я думаю рассмотренный нами список подходов HTML, CSS и JavaScript, должен охватывать любой сценарий использования, с которым вы столкнетесь. Если есть подход, который вы действительно считаете нужным указать в этом списке, напишите об этом в комментариях ниже.
Автор: kirupa
Источник: //www.kirupa.com
Редакция: Команда webformyself.
