Skip to content
Jim Pivarski edited this page Mar 15, 2015 · 1 revision
  1. summary SVGFig logo
  2. labels Example,Version1

_(This page applies only to the 1.x branch of SVGFig.)_

SVGFig logo

To make the SVGFig logo, I converted the text "SVGFig" into a path and increased the number of control points in [http://www.inkscape.org Inkscape], then transformed the path with a very nonlinear function in SVGFig.

For more examples, see the [ExampleGallery Example Gallery]. See also the [Introduction Introduction] and [Reference complete documentation].

import svgfig

# read in the "SVGFig" text I typed and converted into paths
text = svgfig.load("svgfig_logo_source.svg")

# find my objects (this is all meant to be an interactive process)
print text
textpath = svgfig.pathtoPath(text[1])
textpath.attr = {"stroke":"none", "fill":"black"}

# First, get it out of the weirdo units I drew it in, and into something symmetric
symm = svgfig.Fig(textpath, trans=svgfig.window(240, 320, 235, 275, x=-1, y=-1, width=2, height=2, flipy=False))

# Next, be sure I can draw it normally, taking it from symmetric coordinates into a 200x100 page
# (This draws to the screen)
svgfig.canvas_outline(svgfig.Fig(symm, trans=svgfig.window(-1, 1, -1, 1, width=200, flipy=False)).SVG(), viewBox="0 0 200 100").inkview()

# The semicircular axis, with arrows
curveaxis = svgfig.CurveAxis("0.6*(-0.98+cos(t)), sin(t)", -1.2, 1.2, ticks=21, miniticks=81, labels=False, \
                             arrow_start="arrowstart", arrow_end="arrowend", stroke_width="0.5pt")

# The background grid: a nice light blue
thegrid = svgfig.Grid(-1, 1, -1.2, 1.3, ticks=20, stroke=svgfig.rgb(0.8,0.8,1.))

# Transform the text and the grid together, but not the semicircular axis
text_and_grid = svgfig.Fig(thegrid, svgfig.Fig(symm, trans="x-0.1,y"), trans="x + 2*x*y**2, y*(1+1.5*x+4*x**2)")

# Combine them all and convert to SVG (note the nested Figs)
svg = svgfig.Fig(text_and_grid, curveaxis, trans=svgfig.window(-0.8, 0.7, -1, 1.1, width=200, flipy=False)).SVG()
print svg # it's complicated, but clear that our background grid is svg[0,0]

# Define a radial gradient and a clipping rectangle in SVG
# (I learned how to do this by drawing it in Inkscape and looking at the output)
SVG = svgfig.SVG

defs = SVG("defs", \
           SVG("radialGradient", SVG("stop", stop_color="white", stop_opacity=0, offset="0%") \
                               , SVG("stop", stop_color="white", stop_opacity=1, offset="100%") \
                               , cx=100, cy=50, r=100, gradientTransform="translate(0,25) scale(1,0.5)" \
                               , gradientUnits="userSpaceOnUse", id="theRadGrad"), \
           SVG("clipPath", SVG("rect", x=0, y=0, width=200, height=100), id="theClip") \
           )

# add a rectangle with this gradient after the grid before the other artwork
# svg[0, 0, "stroke"] = "url(#theRadGrad)"
svg[0].append(SVG("rect", x=0, y=0, width=200, height=100, stroke="none", fill="url(#theRadGrad)"))
       
# add the gradient definitions before it
svg[0].prepend(defs)

# clip the first group (containing the grid lines)
svg[0].attr["clip-path"] = "url(#theClip)"

svgfig.canvas(svg, viewBox="0 0 200 100").save("svgfig_logo.svg")
[http://svgfig.googlecode.com/svn/wiki/svgfig_logo_source.svg http://svgfig.googlecode.com/svn/wiki/svgfig_logo_source.png]
[http://svgfig.googlecode.com/svn/wiki/svgfig_logo_source.svg svgfig_logo_source.svg]
[http://svgfig.googlecode.com/svn/wiki/svgfig_logo.svg http://svgfig.googlecode.com/svn/wiki/svgfig_logo.png]
[http://svgfig.googlecode.com/svn/wiki/svgfig_logo.svg svgfig_logo.svg]
Clone this wiki locally