Как вставить svg код файл в html


Как вставить svg в html. Вставляем inline svg в 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 36 37 38 39 40 41 42 43 44 
<svg>   <symbol viewBox="0 0 611.989 611.988">     <g>       <g>         <g>           <path d="M305.994,417.769c-30.85,0-55.887,25.037-55.887,55.887s25.038,55.887,55.887,55.887s55.887-25.037,55.887-55.887                   S336.843,417.769,305.994,417.769z M605.436,222.369C530.697,133.434,421.549,82.446,305.994,82.446                   S81.309,133.434,6.551,222.369c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.587,6.558,17.939,6.558                   c7.973,0,15.891-3.391,21.423-9.967c64.084-76.248,157.639-119.989,256.652-119.989c99.013,0,192.568,43.741,256.651,119.971                   c5.533,6.576,13.45,9.967,21.424,9.967c6.353,0,12.724-2.143,17.958-6.558C613.837,251.802,615.366,234.161,605.436,222.369z                   M305.994,194.22c-82.545,0-160.489,36.419-213.879,99.926c-9.929,11.811-8.402,29.434,3.428,39.363                   c5.234,4.396,11.605,6.558,17.958,6.558c7.973,0,15.891-3.391,21.405-9.967c42.716-50.838,105.086-79.993,171.089-79.993                   c66.003,0,128.372,29.155,171.107,79.993c5.533,6.595,13.45,9.967,21.404,9.967c6.353,0,12.724-2.143,17.959-6.558                   c11.829-9.929,13.356-27.57,3.428-39.363C466.483,230.64,388.539,194.22,305.994,194.22z M305.994,305.994                   c-49.553,0-96.331,21.852-128.335,59.948c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.605,6.557,17.958,6.557                   c7.973,0,15.891-3.39,21.405-9.966c21.368-25.429,52.552-40.016,85.544-40.016s64.177,14.587,85.544,40.016                   c5.533,6.595,13.45,9.966,21.405,9.966c6.353,0,12.724-2.142,17.958-6.557c11.83-9.93,13.357-27.553,3.428-39.363                   C402.324,327.846,355.546,305.994,305.994,305.994z"/>         </g>       </g>     </g>   </symbol> </svg>   <div>   <div>     <svg>       <use xlink:href="#icon1"></use>     </svg>   </div>   <div>     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.   </div> </div> <div>   <div>     <svg>       <use xlink:href="#icon1"></use>     </svg>   </div>   <div>     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.   </div> </div>

Как вставить svg картинку на свой сайт

Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS.
Вставка SVG в HTML

SVG через тег img

SVG data URI / base64

SVG через тег object

Вставка SVG через CSS

SVG через свойство background

Вставка SVG в HTML

SVG через тег img

<img src="myImage.svg" alt="myImage">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
 <g>
 <path d="M27,8c-9.374,0-17,7.626-17,17c0,7.112,4.391,13.412,11,15.9V50c0,0.553,0.447,1,1,1h2v2c0,0.553,0.447,1,1,1h6
 c0.553,0,1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1v-9.1c6.609-2.488,11-8.788,11-15.9C44,15.626,36.374,8,27,8z M30,49
 c-0.553,0-1,0.447-1,1v2h-4v-2c0-0.553-0.447-1-1-1h-1v-5h8v5h40z M31.688,39.242C31.277,39.377,31,39.761,31,40.192V42h-8v-1.808
 c0-0.432-0.277-0.815-0.688-0.95C16.145,37.214,12,31.49,12,25c0-8.271,6.729-15,15-15s15,6.729,15,15
 C42,31.49,37.855,37.214,31.688,39.242z"/>
 <path d="M27,6c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v4C26,5.553,26.447,6,27,6z"/>
 <path d="M51,24h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S51.553,24,51,24z"/>
 <path d="M7,24h4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S7.553,24,7,24z"/>
 <path d="M43.264,7.322l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
 s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S43.654,6.932,43.264,7.322z"/>
 <path d="M12.15,38.436l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
 s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S12.541,38.045,12.15,38.436z"/>
 <path d="M41.85,38.436c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l2.828,2.828c0.195,0.195,0.451,0.293,0.707,0.293
 s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L41.85,38.436z"/>
 <path d="M12.15,11.564c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414l-2.828-2.828
 c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L12.15,11.564z"/>
 <path d="M27,13c-6.617,0-12,5.383-12,12c0,0.553,0.447,1,1,1s1-0.447,1-1c0-5.514,4.486-10,10-10c0.553,0,1-0.447,1-1
 S27.553,13,27,13z"/>
 </g>
 </svg>





SVG data URI / base64

<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh3NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />


Закодированное SVG изображение будет начинаться с:

data: image/svg+xml; utf8; base64,

SVG через тег object

<object type="image/svg+xml" data="myImage.svg"></object>

SVG через тег embed

<embed src="myImage.svg"></embed>

Вставка SVG в CSS через свойство background

SVG через свойство background

.svg-background {
 width: 80px;
 height: 80px; 
 background: url('idea.svg') no-repeat center;
 }

Inline SVG CSS background

.svg-inline-css {
 background: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cg%3E%3Cpath d='M27,8c-9.374,0-17,7.626-17,17c0,7.112,4.391,13.412,11,15.9V50c0,0.553,0.447,1,1,1h2v2c0,0.553,0.447,1,1,1h6 c0.553,0,1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1v-9.1c6.609-2.488,11-8.788,11-15.9C44,15.626,36.374,8,27,8z M30,49 c-0.553,0-1,0.447-1,1v2h-4v-2c0-0.553-0.447-1-1-1h-1v-5h8v5h40z M31.688,39.242C31.277,39.377,31,39.761,31,40.192V42h-8v-1.808 c0-0.432-0.277-0.815-0.688-0.95C16.145,37.214,12,31.49,12,25c0-8.271,6.729-15,15-15s15,6.729,15,15 C42,31.49,37.855,37.214,31.688,39.242z'/%3E%3Cpath d='M27,6c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v4C26,5.553,26.447,6,27,6z'/%3E%3Cpath d='M51,24h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S51.553,24,51,24z'/%3E%3Cpath d='M7,24h4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S7.553,24,7,24z'/%3E%3Cpath d='M43.264,7.322l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S43.654,6.932,43.264,7.322z'/%3E%3Cpath d='M12.15,38.436l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S12.541,38.045,12.15,38.436z'/%3E%3Cpath d='M41.85,38.436c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l2.828,2.828c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L41.85,38.436z'/%3E%3Cpath d='M12.15,11.564c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414l-2.828-2.828 c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L12.15,11.564z'/%3E%3Cpath d='M27,13c-6.617,0-12,5.383-12,12c0,0.553,0.447,1,1,1s1-0.447,1-1c0-5.514,4.486-10,10-10c0.553,0,1-0.447,1-1 S27.553,13,27,13z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
 width: 80px; height: 80px; background-size: 80px;
 }

Свойство background будет начинаться с

data: image/svg+xml, %3Csvg

SVG data URI / base64

.svg-base64-CSS { 
 background-image: url("data:image/svg+xml; utf8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh3NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K"); 
 width: 80px; height: 80px; background-size: 80px;
 }

Будет начинаться с

data: image/svg+xml; utf8; base64,

Полезные ссылки

Как вставить svg в html?? — Хабр Q&A

в html
<svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons-individual-tours.svg#ok"></use> </svg> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons-individual-tours.svg#smile"></use> </svg>

файл с иконками icons-individual-tours.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000"> <symbol viewBox="0 0 40 40"> <path d="M34.141 18.906h-5.222a28.538 28.538 0 0 0 1.283-5.4c.452-3.004-1.616-5.805-4.62-6.258a5.437 5.437 0 0 0-.816-.061c-.647 0-1.172.525-1.172 1.172 0 2.831-1.627 7.105-3.526 8.057a51.1687 51.1687 0 0 1-7.179 2.49h2.172c-.647 0-1.172.525-1.172 1.172v16.406c0 .647.525 1.172 1.172 1.172h4.515v1.172c0 .647.525 1.172 1.172 1.172h20.7c1.39-.002 2.648-.82 3.213-2.09l8.222 2.055c.093.023.188.035.284.035h7.031c1.942 0 3.516-1.574 3.516-3.516 0-.443-.084-.883-.247-1.295 1.528-.419 2.589-1.807 2.591-3.392a3.489 3.489 0 0 0-.248-1.3c4.344-2.591 1.688-3.966 2.594-8.075.418-1.895-1.574-3.514-3.515-3.516zM4.687 35.312h3.344V21.25h3.343v14.062zm7.188 1.172c-.001.647-.525 1.171-1.172 1.172H7.031V21.25h5.844v15.234zm22.334-8.203a.771.771 0 0 1-.068 0h-7.032c-.647.001-1.171.527-1.169 1.175.001.645.524 1.168 1.169 1.169h41.8c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-4.688c-.647.019-1.156.558-1.138 1.205.018.621.517 1.12 1.138 1.138h3.344c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-6.887l-8.347-2.087v-14.6a48.0595 48.0595 0 0 0 6.9-2.456c2.692-1.349 4.34-5.617 4.73-8.788 1.409.517 2.26 1.954 2.036 3.438a18.9356 18.9356 0 0 1-1.823 6.393c-.292.578-.06 1.283.518 1.574.164.083.346.126.53.126h7.032c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-7.032c-.646.045-1.132.606-1.087 1.251.041.581.502 1.044 1.083 1.087h7.032c.647-.019 1.187.491 1.205 1.138.019.647-.49 1.186-1.137 1.205zM25.903 4.878c.647.019 1.187-.49 1.206-1.137a.771.771 0 0 0 0-.068v-2.5c0-.647-.524-1.171-1.171-1.172-.647 0-1.172.525-1.172 1.172v2.5c-.019.646.49 1.186 1.137 1.205zm-9.909 1.054l1.657 1.658c.458.458 1.2.457 1.658 0 .458-.458.457-1.2-.001-1.658l-1.657-1.657c-.447-.468-1.189-.486-1.657-.039s-.486 1.189-.039 1.657c.012.013.026.026.039.039zm2.075 7.832c.019-.647-.49-1.187-1.137-1.206a.771.771 0 0 0-.068 0h-2.5c-.647 0-1.171.524-1.172 1.171 0 .647.525 1.172 1.172 1.172h3.5c.647.02 1.187-.49 1.205-1.137zm21.19 0c.019-.647-.49-1.187-1.137-1.206a.771.771 0 0 0-.068 0h-2.5c-.647 0-1.171.524-1.172 1.171 0 .647.525 1.172 1.172 1.172h3.5c.646.02 1.186-.49 1.205-1.137zM34.39 7.57l1.658-1.657c.458-.458.457-1.2 0-1.658-.458-.458-1.2-.457-1.658.001l-1.657 1.657c-.468.447-.486 1.189-.039 1.657s1.189.486 1.657.039c.013-.013.027-.026.039-.039z"/> </symbol> <symbol viewBox="0 0 40 40"> <path d="M20 0C8.954 0 0 8.954 0 20s8.954 20 20 20 20-8.954 20-20C39.987 8.96 31.04.013 20 0zm0 38.008c-9.946 0-18.008-8.062-18.008-18.008S10.054 1.992 20 1.992 38.008 10.054 38.008 20C37.996 29.941 29.941 37.996 20 38.008zm-3.867-20.365A4.9338 4.9338 0 0 0 12 15a5.37 5.37 0 0 0-4.405 2.643c-.213.332-.117.775.215.988.332.213.775.117.988-.216l.024-.039A3.4645 3.4645 0 0 1 12 17c1.153-.14 2.284.395 2.906 1.376.213.332.656.429.988.215a.7143.7143 0 0 0 .239-.948zm16.272 0A5.37 5.37 0 0 0 28 15a4.9338 4.9338 0 0 0-4.133 2.643c-.213.332-.117.775.215.988.332.213.775.117.988-.216l.024-.039A3.0108 3.0108 0 0 1 28 17c1.229-.142 2.44.383 3.178 1.376.213.332.656.429.988.216a.7158.7158 0 0 0 .239-.949zm-1.7 6.153a.6874.6874 0 0 0-1.011 0c-1.185 1.526-6.317 3.213-9.695 3.2-3.359-.008-8.345-1.941-9.7-3.2-.29-.25-.72-.25-1.01 0-.279.277-.28.728-.003 1.007l.003.003c6.042 5.591 15.37 5.591 21.412 0 .277-.277.279-.726.005-1.006l-.001-.004zm-6.785 6.859a.715.715 0 0 0-.878-.501c-.001 0-.002 0-.003.001-1.988.558-4.092.558-6.08 0-.38-.107-.775.115-.882.495-.107.38.115.775.495.882C17.7 31.85 18.847 33 20 33s2.305-1.15 3.426-1.464c.38-.106.602-.5.495-.88v-.001h-.001z"/> </symbol> </svg>

SVG. Вставить SVG | Know-Online.com

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

SVG можно подключать тремя способами. Первый, это подключить напрямую на HTML-странице между тегами <svg>.


 <svg>
 <circle cx='30' cy='30' r='30' fill='green'>
 </svg>
 

Пример на JSFiddle

Второй способ, это создать отдельный файл с расширением SVG, и подключить в теге <img>.


 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
 
 <!-- код SVG -->
 
 </svg>
 

Третий способ, это прописать SVG через Data URI. Этот способ удобен, если не надо создавать отдельный файл для маленькой картинки.


 <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='5' fill='green' /></svg>">
 

Пример на JSFiddle

SVG-картинки можно вставлять как фон объектов через CSS.


 .logo {
 background: url(image.svg);
 }
 

Начало работы - Веб-технологии для разработчиков

Простой пример

Давайте начнем наше погружение с простого примера. Посмотрите на код, представленный ниже:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> 

Скопируйте код и вставьте его в файл demo1.svg. После чего откройте его в Firefox. Браузер отобразит Вам следующее изображение (пользователи Firefox: нажмите сюда):

Процесс отображения включает следующее:

  1. Мы начинаем с корневого элемента svg:
  2. Фон устанавливается красным при помощи рисования прямоугольника <rect/>, который покрывает всю область изображения
  3. Зеленый круг <circle/> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещен на 150px вправо, и 100px вниз).
  4. Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зеленого круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.

Основные свойства файлов SVG

Типы SVG файлов

Файлы SVG бывают двух видов. Нормальные файлы SVG - это простые текстовые файлы, содержащие разметку SVG. Рекомендуется расширение ".svg" (все нижним регистром) к имени файла для этих файлов.

Благодаря потенциально массивному размеру, который файлы SVG могут иметь при использовании в некоторых приложениях (например, географические приложения), спецификация SVG также допускает gzip-архивированные файлы SVG. Рекомендуется расширение ".svgz" (все нижним регистром) к имени файла. К сожалению, очень проблематично получить gzip-архивированные файлы SVG для надёжной работы со всеми SVG совместимыми пользовательскими агентами при управлении с сервера Microsofts IIS, когда Firefox не может загрузить gzip-архивированный SVG с локального компьютера. Избегайте gzip-архивированного SVG, кроме случаев, когда вы публикуетесь на вебсервере, в корректной работе которого вы уверены (смотри ниже).

Слово о Вебсерверах

Теперь, когда вы имеете представление о том, как создавать основные файлы SVG, следующим шагом будет загрузить их на Вебсервер. Но на этом этапе существуют некоторые подводные камни. Для нормальных файлов SVG, сервера должны посылать заголовки HTTP:

Content-Type: image/svg+xml Vary: Accept-Encoding

Для gzip-архивированных файлов SVG, сервера должны посылать заголовки HTTP:

Content-Type: image/svg+xml Content-Encoding: gzip Vary: Accept-Encoding

Вы можете проверить, правильные ли заголовки HTTP  посылает ваш сервер с файлами SVG, используя Network Monitor panel или сайт, такой как web-sniffer.net. Введите URL одного из файлов SVG и смотрите на заголовки ответа HTTP. Если вы обнаружите, что сервер не посылает заголовки с величинами, данными выше - вам следует связаться с вашим хостингом. Если у вас возникнут проблемы с тем, чтобы корректно сконфигурировать их сервера для SVG, существуют способы сделать это самостоятельно. Смотри server configuration page на странице SVG wiki о ряде простых решений.

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

Как правильно подключить код SVG используя только CSS? — Хабр Q&A

Делаю всегда практически вот таким способом
1) создаю спрайт, использую symbol
<div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol viewBox="0 0 17 32"> <g> <line x1="16" y1="16" x2="1" y2="31"/> <path d="M1,1"/> <line x1="1" y1="1" x2="16" y2="16"/> </g> </symbol> <symbol viewBox="0 0 17 32"> <g> <line x1="1" y1="16" x2="16" y2="1"/> <path d="M16,31"/> <line x1="16" y1="31" x2="1" y2="16"/> </g> </symbol> </svg> </div>

2) в разметке пишу:
<svg> <use xlink:href="#right-arr"></use> </svg> <svg> <use xlink:href="#left-arr"></use> </svg>

и вуаля, готово, можете воздействовать на Ваши иконки как угодно и где угодно с помощью css.
Касательно простыни с спрайтом svg она под display: none; но если коробит восприятие можно и забросить куда -то на сервак и оттуда уже тянуть.

Как добавить масштабируемую векторную графику (SVG) на вашу веб-страницу

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

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

1. Использование тега

Если вы собираетесь использовать какие-либо расширенные функции SVG, такие как CSS и создание сценариев, лучшим вариантом будет тег HTML5 :

   Ваш браузер не поддерживает SVG   

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

2. Использование тега

Я включил для полноты картины, но не использую его! Хотя он похож на , никогда не был и, вероятно, никогда не будет частью какой-либо спецификации HTML или XHTML. Однако он поддерживается большинством браузеров и часто используется для реализации подключаемых модулей Flash.

Вот код. Работает, но не пользуйся!…

    

3. Внутри

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

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

4. Встроенный SVG XML в страницу HTML5

Изображение SVG можно добавить как островок кода прямо на страницу HTML5 с помощью внешних тегов :

       Встроенный SVG    

Встроенный SVG

Мой SVG

Метод работает во всех браузерах HTML5, а также разрешает анимацию, создание сценариев и CSS. Но стоит ли его использовать? Мне этот метод кажется немного грязным. Возможно, это вариант для простых изображений или если вы создаете изображение с помощью JavaScript, но я рекомендую по возможности хранить файлы отдельно.

5. Использование тега

SVG могут быть добавлены на вашу веб-страницу, как и любое другое изображение:

    

При необходимости могут быть добавлены обычные атрибуты width, height, alt и другие.

Вы, наверное, задаетесь вопросом, почему img не занимает первое место в этом списке. По соображениям безопасности браузеры отключают скрипты SVG, ссылки и другие типы интерактивности, когда они добавляются на вашу страницу с помощью тега img . Кроме того, IE9, Chrome и Safari не будут применять правила таблиц стилей к SVG, если они определены в отдельном файле CSS.

6.Использование фонового изображения CSS

SVG можно использовать в качестве фона CSS для любого элемента:

  #myelement { фоновое изображение: URL (image.svg); }  

Подобно Теги , скрипты SVG, связывание и другие типы интерактивности отключаются при использовании этого метода.

Что следует использовать?

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

Для изображений без взаимодействия можно использовать тег или фон CSS.

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

Скоро в продаже: другие статьи по SVG, включая CSS и сценарии…

Комментарии к статье закрыты. Есть вопрос по HTML5? Почему бы не спросить об этом на нашем форуме?

.

SVG в HTML


Вы можете встраивать элементы SVG прямо в свои HTML-страницы.


Встраивать SVG прямо в HTML-страницы

Вот пример простой графики SVG:

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

, а вот HTML-код:

Пример


Мой первый SVG




Попробуй сам "

SVG Объяснение кода:

  • Изображение SVG начинается с элемента
  • Атрибуты ширины и высоты элемента определяют ширину и высоту изображения SVG.
  • Элемент используется для рисования круга.
  • Атрибуты cx и cy определяют координаты x и y центра круга.Если cx и cy равны не задан, центр круга установлен на (0, 0)
  • Атрибут r определяет радиус круга
  • Атрибуты обводки и ширины обводки определяют способ отображения контура фигуры. Мы устанавливаем контур круга на зеленую «границу» размером 4 пикселя
  • Атрибут заливки относится к цвету внутри круга. Устанавливаем цвет заливки на желтый
  • Закрывающий тег закрывает изображение SVG

Примечание: Поскольку SVG написан в XML, все элементы должны быть правильно закрыто!



.

css - Как использовать внешний SVG в HTML?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Как вставить объект из файла SVG с помощью javascript / html?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Рекламная
.

html - Как изменить файл SVG на HTML5

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
.

javascript - вставить строковый элемент svg в существующий тег svg

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Смотрите также