[ CSS / background-image] check box or radio에 SVG이미지 넣기

CSS에 svg background image 넣기

 

input[type="checkbox"]:checked {
  background-color: rgba(255, 255, 255, 1); /* Background color when checked */
  border-color: rgba(0, 0, 0, 1); /* Change border color when checked */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

 

 

Convert the SVG to a Data URL

The SVG you've provided needs to be URL-encoded. Here's the converted SVG:

현재 있는 걸 아래쪽으로 URL-encoded 해야 한다.? 안해도 된다고 생각하기도 함.

<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.1667 1.28333C14.4236 2.00904 15.4692 3.05043 16.1999 4.30441C16.9307 5.55839 17.3212 6.98147 17.3329 8.43278C17.3447 9.88408 16.9771 11.3133 16.2668 12.5789C15.5564 13.8445 14.5278 14.9027 13.2828 15.6486C12.0378 16.3945 10.6196 16.8023 9.1685 16.8317C7.71744 16.8611 6.28387 16.511 5.00971 15.816C3.73555 15.1211 2.66497 14.1054 1.90397 12.8696C1.14297 11.6337 0.717922 10.2206 0.670915 8.76999L0.666748 8.49999L0.670915 8.22999C0.717584 6.79082 1.13637 5.38829 1.88645 4.15915C2.63652 2.93001 3.69229 1.9162 4.95082 1.21656C6.20936 0.516919 7.6277 0.155322 9.06759 0.167023C10.5075 0.178724 11.9198 0.563323 13.1667 1.28333ZM12.0892 6.24416C11.9458 6.10068 11.7548 6.01449 11.5523 6.00175C11.3498 5.98902 11.1496 6.05062 10.9892 6.17499L10.9109 6.24416L8.16675 8.98749L7.08925 7.91083L7.01091 7.84166C6.85057 7.71737 6.65039 7.65585 6.44792 7.66862C6.24545 7.68139 6.05459 7.76759 5.91113 7.91104C5.76768 8.0545 5.68148 8.24536 5.66871 8.44783C5.65594 8.6503 5.71746 8.85048 5.84175 9.01083L5.91092 9.08916L7.57758 10.7558L7.65592 10.825C7.80206 10.9384 7.98178 10.9999 8.16675 10.9999C8.35172 10.9999 8.53144 10.9384 8.67758 10.825L8.75591 10.7558L12.0892 7.42249L12.1584 7.34416C12.2828 7.18382 12.3444 6.98361 12.3317 6.78109C12.3189 6.57857 12.2327 6.38765 12.0892 6.24416Z" fill="#1A8DF7"/> </svg>

 

data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.1667%201.28333C14.4236%202.00904%2015.4692%203.05043%2016.1999%204.30441C16.9307%205.55839%2017.3212%206.98147%2017.3329%208.43278C17.3447%209.88408%2016.9771%2011.3133%2016.2668%2012.5789C15.5564%2013.8445%2014.5278%2014.9027%2013.2828%2015.6486C12.0378%2016.3945%2010.6196%2016.8023%209.1685%2016.8317C7.71744%2016.8611%206.28387%2016.511%205.00971%2015.816C3.73555%2015.1211%202.66497%2014.1054%201.90397%2012.8696C1.14297%2011.6337%200.717922%2010.2206%200.670915%208.76999L0.666748%208.49999L0.670915%208.22999C0.717584%206.79082%201.13637%205.38829%201.88645%204.15915C2.63652%202.93001%203.69229%201.9162%204.95082%201.21656C6.20936%200.516919%207.6277%200.155322%209.06759%200.167023C10.5075%200.178724%2011.9198%200.563323%2013.1667%201.28333ZM12.0892%206.24416C11.9458%206.10068%2011.7548%206.01449%2011.5523%206.00175C11.3498%205.98902%2011.1496%206.05062%2010.9892%206.17499L10.9109%206.24416L8.16675%208.98749L7.08925%207.91083L7.01091%207.84166C6.85057%207.71737%206.65039%207.65585%206.44792%207.66862C6.24545%207.68139%206.05459%207.76759%205.91113%207.91104C5.76768%208.0545%205.68148%208.24536%205.66871%208.44783C5.65594%208.6503%205.71746%208.85048%205.84175%209.01083L5.91092%209.08916L7.57758%2010.7558L7.65592%2010.825C7.80206%2010.9384%207.98178%2010.9999%208.16675%2010.9999C8.35172%2010.9999%208.53144%2010.9384%208.67758%2010.825L8.75591%2010.7558L12.0892%207.42249L12.1584%207.34416C12.2828%207.18382%2012.3444%206.98361%2012.3317%206.78109C12.3189%206.57857%2012.2327%206.38765%2012.0892%206.24416Z%22%20fill%3D%22%231A8DF7%22%2F%3E%3C%2Fsvg%3E

 

전체 문장을 보면

input[type="checkbox"]:checked {
background-color: rgba(255, 255, 255, 1); /* Background color when checked */
border-color: rgba(0, 0, 0, 1); 
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.1667%201.28333C14.4236%202.00904%2015.4692%203.05043%2016.1999%204.30441C16.9307%205.55839%2017.3212%206.98147%2017.3329%208.43278C17.3447%209.88408%2016.9771%2011.3133%2016.2668%2012.5789C15.5564%2013.8445%2014.5278%2014.9027%2013.2828%2015.6486C12.0378%2016.3945%2010.6196%2016.8023%209.1685%2016.8317C7.71744%2016.8611%206.28387%2016.511%205.00971%2015.816C3.73555%2015.1211%202.66497%2014.1054%201.90397%2012.8696C1.14297%2011.6337%200.717922%2010.2206%200.670915%208.76999L0.666748%208.49999L0.670915%208.22999C0.717584%206.79082%201.13637%205.38829%201.88645%204.15915C2.63652%202.93001%203.69229%201.9162%204.95082%201.21656C6.20936%200.516919%207.6277%200.155322%209.06759%200.167023C10.5075%200.178724%2011.9198%200.563323%2013.1667%201.28333ZM12.0892%206.24416C11.9458%206.10068%2011.7548%206.01449%2011.5523%206.00175C11.3498%205.98902%2011.1496%206.05062%2010.9892%206.17499L10.9109%206.24416L8.16675%208.98749L7.08925%207.91083L7.01091%207.84166C6.85057%207.71737%206.65039%207.65585%206.44792%207.66862C6.24545%207.68139%206.05459%207.76759%205.91113%207.91104C5.76768%208.0545%205.68148%208.24536%205.66871%208.44783C5.65594%208.6503%205.71746%208.85048%205.84175%209.01083L5.91092%209.08916L7.57758%2010.7558L7.65592%2010.825C7.80206%2010.9384%207.98178%2010.9999%208.16675%2010.9999C8.35172%2010.9999%208.53144%2010.9384%208.67758%2010.825L8.75591%2010.7558L12.0892%207.42249L12.1584%207.34416C12.2828%207.18382%2012.3444%206.98361%2012.3317%206.78109C12.3189%206.57857%2012.2327%206.38765%2012.0892%206.24416Z%22%20fill%3D%22%231A8DF7%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: center; //그냥 사이즈를 직접 넣는게 더 잘 맞는다.
}