데이터URI data:image/svg

1 개요[ | ]

데이터URI스킴 SVG
data:image/svg
data:image/svg+xml

2 예시: utf8[ | ]

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>" alt="hamburger" />

<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%237c7b7b'%2F%3E%3C%2Fsvg%3E" alt="slash" />

3 예시: base64[ | ]

<style>
.search-icon {
  width: 100px; height: 100px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc3NyIgZD0iTTUuOSAxNS4yYzEuMiAxLjIgMi43IDEuOCA0LjQgMS44IDEuNSAwIDIuOS0uNSA0LTEuNGw0LjMgMy45czEtLjMgMS4zLTEuNGwtNC4zLTMuOWMxLjYtMi40IDEuMy01LjctLjgtNy44LTEuMi0xLjItMi43LTEuOC00LjQtMS44LTEuNy0uMS0zLjMuNi00LjQgMS44LTIuNSAyLjQtMi41IDYuNC0uMSA4Ljh6TTcgNy43cy4xLS4xLjItLjFjLjktLjkgMi0xLjMgMy4yLTEuMyAxLjIgMCAyLjQuNSAzLjIgMS4zIDEuOCAxLjggMS44IDQuNyAwIDYuNC0uOS45LTIgMS4zLTMuMiAxLjMtMS4yIDAtMi40LS41LTMuMi0xLjMtMS44LTEuNy0xLjgtNC41LS4yLTYuM3oiLz4KPC9zdmc+Cg==);
}
</style>

<div class='search-icon'></div>

4 같이 보기[ | ]