PHP로 SVG 문서 만들기

이 포스트에서는 PHP로 SVG 문서를 만드는 방법을 설명합니다.

방법은 PHP로 간단한 XML 만들기 포스트에 설명한 방법과 대동소이합니다 SVG가 XML 형식으로 되어 있기 때문입니다.

일단 코드는 다음과 같습니다.

<?php
// Create SVG XML
$svg = new SimpleXMLElement('<svg />');
$svg->addAttribute('version', '1.1');
$svg->addAttribute('xmlns', 'http://www.w3.org/2000/svg');
$svg->addAttribute('xmlns:xmlns:xlink', 'http://www.w3.org/1999/xlink');

// 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 코드를 보면,

<?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 형식의 그래픽 문서를 간단히 만들어 볼 수 있습니다.