draw.io에서 svg 아이콘을 추가하여 선과 채우기를 편집하고 싶습니다.

1. SVG 준비

Icons - Material Design에서 SVG로 다운로드 한 것을 사용.

2. SVG 편집

아마 baseline-face-24px.svg 와 같은 파일명이 되어 있으므로, 텍스트 에디터로 열린다. (아래는보기 쉽도록 약간 성형되었습니다.)

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>
<path fill="none" d="M0 0h24v24H0z"/>
</svg>

<path fill="none" d="M0 0h24v24H0z"/> 는, 아이콘을 둘러싸는 테두리가 되어 있어, 불필요하므로 삭제.

<style>path {fill: black; stroke: none;}</style> 추가.

이번은, path 를 지정하고 있지만, SVG 의 사양에 준거하고 있으면 당연, 요소 (path) 에의 class 의 추가와, 그 class 의 스타일의 지정도 가능.

아래 코드가 편집 후.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style>
path {
  fill: black;
  stroke: none;
}
</style>
<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>
</svg>