SVG code를 그림 파일로 변환, 시행착오

파워포인트만으로 만들기 어려운 그림 자료를 만들기 위해 SVG 코드를 직접 작성해보았다.

검색해보면 보통 일러스트레이터나 Inkscape 같은 프로그램에서 그린 그림을 SVG로 export하는 방법이 안내되어 있는데 나는 반대로 SVG 코드를 직접 작성하고 그것을 그림으로 만들고자 하였다

 

CRISPR의 spacer 시퀀스의 배열을 여러 strain에서 비교하려고 하다보니

반복되는 도형으로 spacer임을 나타내고 그 중 특성 spacer를 다른 색으로 표시하고 싶었다.

그래서 파워보인트나 그림을 그려주는 프로그램에서 표현하려면 몇 번째 spacer 인지 눈으로 세어가면서 표시해야 하기 때문에 코딩 수 그림파일로 변환하기로 하였다.

 

원래 html 이 뭔지는 대충 알고 있었지만 SVG나 CSS에 대해서는 전혀 몰라서

공부해가며 시행착오를 겪으니 시간이 엄청나게 오래 걸렸다.

 

각 문자나 도형에 font-size, width, height, fill-opacity 등을 반복적으로 설정하는 것을 피하려고

CSS에서 몇 가지를 정의(? 라고 하나 이쪽 용어를 모르겠다)하였다

 

<style>
            svg>rect{height: 15px; fill: url(#spacer);}
            text{font-size: 10px;}
            defs>rect{width: 2px; height: 15px;}
            polygon{fill-opacity: 0.4;}
 </style>

 

코딩을 완성해서 svg tag 안의 내용을 따로 저장하고 inkscape와 ppt에서 열어보니

CSS에서 정의된 부분이 제대로 보이지 않았다. 웹브라우저에서는 잘 보이는데 svg 안쪽만 따로 저장해서 그림으로 보면 안보인다... 안보이는 부분을 살펴보니

 

svg>rect{height: 15px; fill: url(#spacer);}
defs>rect{width: 2px; height: 15px;}

이렇게 정의된 부분이 안보였고 한참 헤매고 난 후 부모자식 선택자인 > 선택자가 인식이 안되는 것을 알게되었다

일반적인 tag 선택자는 그림으로 저장해도 잘 인식된다

결국 방법을 못찾아서 결국 반복적으로 모든 rect 에 height width fill을 추가하였다. 그림은 얻었는데 왜 그런 건지는 이해를못하겠다

 

 (12/16 update)

검색하다보니 svg에서 사용되는 attribute 중에 CSS 자체에서 인식이되는 태그가 있고 안되는 것들이 있다고 한다.

예를 들어 rect 태그 안에 height width는 인식이 안되는 것이다... 그래서 최종적으로 svg에서 반영이 안되는 것인지...

결국은 각 태그마다 필요한 attribute을 반복적으로 추가해주고 마무리하였다