[컴][웹] GWT 에서 SVG 를 사용해 보자 - lib-gwt-svg 사용

gwt 에서 svg 사용하기 / vector graphic on gwt


사실 svg 를 data visualization 에 사용할 목적으로 사용하려 했는데, d3 로 하는 것이 나을 듯 하다.(d3 관련 자료)

lib-gwt-svg

gwt 에서 svg 를 사용하기 위해서 lib-gwt-svg 를 사용하면 된다.

• lib-gwt-svg : lib-gwt-svg - a library to add SVG graphics to GWT applications - Google Project Hosting

Maven repository

ref. 1 를 보면 maven 으로도 제공한다고 한다.

아래처럼 pom.xml 에 추가해주면 된다.

...

  <dependency>
      <groupId>org.vectomatic</groupId>
      <artifactId>lib-gwt-svg</artifactId>
      <version>[0.5.9,)</version>
  </dependency>

</dependencies>

[0.5.9,) 는 version >= 0.5.9 라는 이야기이다. ref.2 를 참고하자.

Sample source

아래 lib-gwt-svg 의 sample source 가 있다.

• sample page : http://www.vectomatic.org/gwt/lib-gwt-svg-samples/lib-gwt-svg-samples.html
• sample source : laaglu/lib-gwt-svg-samples · GitHub

사용 예

// pom.xml
  <dependency>
      <groupId>org.vectomatic</groupId>
      <artifactId>lib-gwt-svg</artifactId>
      <version>[0.5.9,)</version>
  </dependency>

</dependencies>

// *.gwt.xml
<inherits name="org.vectomatic.libgwtsvg" />

// TestViewImpl.java
@UiField
HTMLPanel container;

private Presenter presenter;

public TestViewImpl() {
    initWidget(ourUiBinder.createAndBindUi(this));

    // Create a SVG document
    OMSVGDocument doc = OMSVGParser.currentDocument();

    // Create the root svg element
    OMSVGSVGElement svg =  doc.createSVGSVGElement();
    svg.setViewBox(0f, 0f, 300f, 200f);
    svg.getWidth().getBaseVal().newValueSpecifiedUnits(Style.Unit.PCT, 100);
    svg.getHeight().getBaseVal().newValueSpecifiedUnits(Style.Unit.PCT, 100);

    // Create a rect
    OMSVGRectElement rect = doc.createSVGRectElement(5f, 35f, 50f, 20f, 4f, 4f);
    rect.getStyle().setSVGProperty(SVGConstants.CSS_FILL_PROPERTY, SVGConstants.CSS_LIGHTGREEN_VALUE);
    rect.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_PROPERTY, SVGConstants.CSS_BLACK_VALUE);


    svg.appendChild(rect);
    container.getElement().appendChild(svg.getElement());

}

Reference

1. lib-gwt-svg is now available on Maven central repository « vectomatic
2. java - How do I tell Maven to use the latest version of a dependency? - Stack Overflow