이 포스트에서는 PHP로 SVG 문서를 만드는 방법을 설명합니다.
방법은 PHP로 간단한 XML 만들기 포스트에 설명한 방법과 대동소이합니다 SVG가 XML 형식으로 되어 있기 때문입니다.
일단 코드는 다음과 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?php// Create SVG XML$svg = new SimpleXMLElement('<svg />');$svg->addAttribute('version', '1.1');// Width and Height$svg->addAttribute('width', 100);$svg->addAttribute('height', 100);// Elements$rect = $svg->addChild('rect');$rect->addAttribute('x', 10);$rect->addAttribute('y', 10);$rect->addAttribute('width', 50);$rect->addAttribute('height', 50);$rect->addAttribute('fill', 'red');$circ = $svg->addChild('circle');$circ->addAttribute('cx', 60);$circ->addAttribute('cy', 60);$circ->addAttribute('r', 30);$circ->addAttribute('fill', 'blue');// Print$dom = new DOMDocument();$dom->loadXML($svg->asXML());$dom->preserveWhiteSpace = false;$dom->formatOutput = true;$dom->xmlStandalone = false;$dom->encoding = 'UTF-8';$formattedXML = $dom->saveXML();Header('Content-Type: image/svg+xml');print($formattedXML);?> |
처음에 svg를 최상위 요소로 지정합니다. 그리고 속성값으로 버전과 xmlns URI를 추가하여 브라우저가 SVG 형식으로 인식할 수 있게 합니다. 추가로 width 속성값과 height 속성값을 각각 (100, 100)으로 준 것은 이 SVG 문서의 폭과 높이를 (100, 100)으로 지정하는 것을 의미합니다.
그리고 13번 줄부터 18번 줄까지에 걸쳐 rect 요소를 삽입하고 속성값으로 x 10, y 10, width 50, height 50, fill red를 주었습니다. x 10, y 10의 위치에 폭 50, 높이 50의 사각형을 그리고 채움색은 빨강으로 하는 속성입니다. 20번 줄부터 24번 줄은 circ 요소를 삽입하고 속성값으로 cx 60, cy 60, r 30, fill blue를 주었습니다. x 60, y 60 위치를 중심으로 하고 반지름은 30으로 하는 원을 그리고 채움색은 파랑으로 하는 속성입니다.
27번 줄부터는 PHP로 간단한 XML 만들기 2 포스트에 나온 것과 같이 만들어진 XML 객체를 DOC 문서로 변환한 다음 헤더를 ‘Content-Type: image/svg+xml’로 부여하고 출력하기 위한 코드입니다.
이 코드를 실행하였을 때,
브라우저에 위와 같은 그림이 보이면 성공입니다.
이렇게 해서 생성된 XML 코드를 보면,
1 2 3 4 5 | <?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100"> <rect x="10" y="10" width="50" height="50" fill="red"/> <circle cx="60" cy="60" r="30" fill="blue"/></svg> |
이와 같습니다.
이렇게 해서 PHP로 SVG 형식의 그래픽 문서를 간단히 만들어 볼 수 있습니다.