README
¶
Pollyanna
Go library to convert SVG data to HTML + CSS Polygons
Usage
svgData := `<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<polygon fill="#F3CD5E" points="366.4,7.6 432.7,5.6 430.6,67.7 401.1,71.1 "/>
<polygon fill="#F1BD36" points="432.7,5.6 441.3,66.2 401.1,71.1 "/>
<polygon fill="#B77E00" points="366.4,7.6 364.1,67.7 401.1,71.1 "/>
<path fill="#F1BD36" d="M432.7,5.6 L441.3,66.2 L401.1,71.1 "/>
</svg>`
svg, err := pollyanna.ParseSVG(svgData)
output, err = svg.GenerateOutput()
// Access compacted generated data
fmt.Println("Generated HTML DOM:", output.HTML)
fmt.Println("Generated CSS:", output.CSS)
// Access generated CSS rules directed
fmt.Println("Raw CSS Nodes:", output.CSSNodes)
Notes
Current version only supports <polygon> and <path> nodes from SVG files.
SVG <path> nodes only support the basic M, L, and Z commands when
being converted to CSS polygon clip-paths; path curves via C, S, Q, T
and arc commands via A are ignored.
A future version may support converting curves to polygon elements via sampling, but that is a few versions down the road.
For best results, when you export from Sketch, Photoshop, Illustrator, etc... please flatten your image with no layers.
Development
Requirements
- GoConvey (for test filesystem)
Please add tests where applicable when submitting a Pull Request.
Documentation
¶
Index ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type Node ¶
type Node struct {
XMLName xml.Name
Nodes []Node `xml:",any"`
Width string `xml:"width,attr"`
Height string `xml:"height,attr"`
ViewBox string `xml:"viewBox,attr"`
Fill string `xml:"fill,attr"`
RawPoints string `xml:"points,attr"`
D string `xml:"d,attr"`
ID string `xml:"id,attr"`
}
Node is a generic SVG XML node
func (Node) BuildPolygons ¶
type Svg ¶
type Svg struct {
XMLName xml.Name `xml:"svg"`
Version string `xml:"version,attr"`
Width string `xml:"width,attr"`
Height string `xml:"height,attr"`
ViewBox string `xml:"viewBox,attr"`
Polygons []Polygon `xml:"polygon"`
}
Svg is the top level <svg/> node
func (Svg) GenerateOutput ¶
GenerateOutput converts the raw SVG data into HTML DOM nodes and associated CSS rules
Source Files