소개

Cacoo에서 만든 그림은 화면 메뉴에서 SVG로 내보낼 수 있습니다.
이것을 asciidoctor로 문서에 묻으면 이미지와 달리 확대 축소해도 깨끗한 그림을 할 수 있다고 기대해 봤습니다.

샘플

출처 : htps : // 기주 b. 코 m / h 나카무 r / 아스 도도 c와 r 푸 푸 b
HTML 출력 : htps : // h 나카무 r. 기주 b. 이오 / 아 s도도 c와 r ぉ ぷ b え m ba svg ー ぁ mp ぇ / c ぁ s_ ぢ 아 g 등 m. HTML
PDF 출력 : htps : // h 나카무 r. 기주 b. 이오 / 아 s도도 c와 r ぉ ぷ b え m ba svg ー ぁ mp ぇ / c ぁ s_ ぢ 아 g 등 m. pdf

출력 절차

설정

다음 명령으로 설정합니다.

bundle --path vendor/bundle --binstubs vendor/bin

또, PDF 출력에는 asciidoctor/asciidoctor-fopub 를 사용하고 있으므로, Java를 인스톨 해 두어 주세요.

Hombrew Cask를 설정했다면 다음 명령으로 OK입니다.

brew cask install java

HTML 출력

bundle exec rake html

PDF 출력

bundle exec rake pdf

처음 실행할 때 asciidoctor/asciidoctor-fopub을 복제한 다음 실행합니다.

도전

Cacoo의 다이어그램을 SVG 형식으로 내보내는 것을 API로하고 싶습니다.

그림의 이미지를 얻는 API 에서는 PNG 형식 밖에 취득할 수 없는 것 같습니다. SVG 형식에서도 얻을 수 있도록 문의 에서 요청을 보내 보았습니다.

PDF라면 그림 아래에 쓸데없는 여백이 생겨 버린다 → 해결

출력된 PDF를 보면 아래의 스크린샷과 같이 그림 아래에 쓸데없는 여백이 생겨 버립니다. HTML에서는 쓸데없는 여백을 할 수 없습니다.



이 문제에 대해서는 asciidoctor 포럼에서 질문해 보았습니다.

2014-11-04 추가

포럼에서 답변을 받고 해결했습니다. svg의 루트 요소에 width 및 height 속성을 추가하면 OK였습니다. 위의 예에서는 viewBox="75.0 34.5 441.0 265.5" 로 지정되었으므로 width="441.0" height="265.5" 를 추가했습니다. 이제 그림과 후속 텍스트 사이의 낭비 여백은 사라졌습니다!



역시 PNG 이미지보다 SVG로 묻는 편이 문자가 선명하고 깨끗하네요!

그리고는 Cacoo가 SVG에서 취득하는 API를 준비해 줄 것을 기대하고 있습니다.

Cacoo의 그림의 이미지 취득 API로 SVG 형식을 서포트하는 요망에 투표 부탁드립니다!

2014-11-04 추가

Cacoo의 그림의 이미지 취득 API로 SVG 형식을 지원 해 주었으면 문의 양식으로 부탁해 보았는데,
요청 접수 창구 (익명으로 투고 가능) 에게 주세요라고 하는 답변을 받았습니다.

라는 것으로, 조속히 요망을 썼습니다. 여러분 부디 투표를 부탁합니다!

그림의 이미지 획득 API에서 SVG 형식을 지원하십시오! – cacoo 고객 피드백 및 아이디어