svg 에서 image 가져오기

 

svg를 이용할 경우 image를 불러올때 다음과 같은 태그를 사용합니다.

<svg width="950" height="360" xmlns="http://www.w3.org/2000/svg">
  <image href="flask.svg" x="5" y="60" height="60" width="60" />
</svg>

svg 파일을 browser로 열면 위와 같이 svg 이미지가 잘 출력이 됩니다.

 

그런데 Django를 이용해서 svg 파일을 생성하는 경우 svg 내부에서는 호출되지만 

svg를 호출하는 html template에서 이미지가 불러와지지 않는 경우가 있었습니다.

이를 해결하는 한가지 방법으로,

image href 부분에 svg파일을 base64로 인코딩한 결과값을 넣어주는 방법이 있습니다.

 

<image href="data:image/svg+xml;base64, [base64로 svg 파일을 encoding한 결과값]" />

 

이미지 파일을 base64로 인코딩하는 방법은 다음 글에 소개하도록 하겠습니다.

 

 

# base64로 이미지 파일 인코딩하기

https://taltal-dev-note.tistory.com/3

이미지 base64 encoding 하기 #변환 사이트 이용