Friday, January 30, 2015

How to create Touch to Call feature within a SVG

I tried to set this up Touch to Call in the SVG Editor yesterday, but was overthinking the process.  It's so easy, it may as well have an   EASY button.

Here's an image of the source:

And directly above is the svg. Give it a try! This is how to set up Touch to Call in a SVG Touch to call

Thursday, January 29, 2015

How to Create an Internal Anchor (Link) within a SVG

 Did you know that Google & Bing index SVGs for their search results?  Because a SVG can be 100% text, it is typically lighter than a pdf or quite likely, a web page. 

Linking a SVG to an external URL is easy, as I've demonstrated within an earlier post, but it's just as easy to create internal links within a SVG. This could be useful when you'd want to consolidate a large amount of information within one svg and would like to make navigation simpler. Let's say that someone is selling a variety of stuff on EBay or Etsy and instead of only listing all of their items separately, they'd also like to make a consolidated page of all their items and descriptions - then make additional links to Etsy or EBay for the specific listing.

Will it help in SEO?  I'm not sure, but I suspect that if the content is not identical, it won't hurt.  We have an experiment running right now (for a shop at Etsy) and should be able to report any success within 6 weeks.

Anyway, here's how to create an internal, SVG link.

I started by creating a long and narrow SVG (document properties), just to make it easier to view here at Blogger.  The link will be at the top (Link to rectangle) and the Anchor (a Red Rectangle).will be at the bottom of a 2,000 pixel svg.

 After I drew the red rectangle, I selected it and in Element Properties (right toolbar) I changed its ID to 'rectangle'.

Then I went back up to my text, selected it and then clicked the Link tool (top tools).  It popped up a URL box and I entered: '#rectangle', then clicked ok.

That's it.  I went into my source, copied it, pasted it into a text editor and saved.  Soon, you will be able to export the source to your desktop.

Link to the svg is here:

Wednesday, January 28, 2015

Sample & Example SVGs, current list

Using the online SVG Editor to create sample SVGs is a productive way to not only discover bugs, but also to get ideas for future tools.  The current page is here at Cloudsville:

Make sure you understand that these are to be used for SVG Editor practice, not for production. Instructions for loading them into the Editor are at Cloudsville.  Load an svg, ungroup it, then pull it apart.  The current list with a link to the specific SVG download is below:

1) health_form.svg  This was our first effort.  A TPA (Third Part Administrator) uses this for some of his corporate customers.

2) mental_health_form.svg  Nothing special here.  Just more practice.

3) max_bens.svg  A list of various IRS maximums as it relates to employee benefits.  This one was a bear.

4) all svg A zip of individual 2015 calendar months.  Nothing elaborate.  Individual svg months are immediately below

5) January, February, March, April, May, June, July, August, September, October, November, December

6) vectoriole_forweb.svg  This is the oriole that is in a previous post.

7) daily_housekeeping_report.svg  Daily housekeeping list (for a motel).

8) camping_backpacking_list.svg  Backpacking/camping list of items.

9) wedder_planning_list.svg  An entire industry lives around weddings.  Big to do list.

10) swot.svg   SWOT is an acronym for Strengths, Weakness, Opportunities & Threats. 
In our case, it was a way to practice layers, opacity to achieve different colors.

11) calorie_burn_different_weight_exercise.svg   Name is sufficiently descriptive.  Seemed appropriate right after New Years.

12) knitting_yarnweight_chart.svg   Watching my wife knit must be similar to the feeling she gets when watching a baseball game.  Some knitting 'rules' are listed.

13) newborn_baby_checklist.svg  There's a reason why Mothers get their own day.

All of this will become much more meaningful/interesting, when we are able to add a datasource and data fields to each SVG form.  Doing so will allow personalization, targeted marketing or market segmentation.  All of these mean much the same thing; increase your sales.

Hopefully see something for testing in less than one month.

Stand by. 

Friday, January 23, 2015

The Oriole, a SVG by Vectoriole

I know this (see bottom of this post) is still in progress, but thought I'd put it up.  We've also created a few health related svg forms, along with a svg calendar.  None of these should be used for production, but could be helpful to begin practicing using the SVG Editor.  Go here for SVG downloads and fuller explanation:

Here is what is in progress, as described by our programmer:

"What I meant by proxy is more about a programming pattern. So the proxy is the object that serves as a mediator between two applications (in our case Vectoriole and Younicycle). I don't want to hardcode Vectoriole into Younicycle, because we don't know how and where it can be used in future. Ideally, it will be used with other systems that provide data.

So I'm going to add a proxy class (YC_Proxy), that will know what younicycle can give us, and also it will make requests like - getImages, getRecords, etc. In time we can add more proxy classes for other services.

I'm also going to create an interface (list of functions) that the proxy object will provide. After that, we can document it and let other programmers write proxies for their systems (using our interface API)."

The Oriole, a SVG by Vectoriole <\body> <\html>

Friday, January 16, 2015

SVG Editor, new Domain name

My original intent was to use the domain name '' for this project. At the time of purchase, I had no idea that the direction would eventually lead to a SVG Editor. That domain expires next week and I have decided to let it lapse.

I just bought the domain: and I like it.  It's a beautiful bird + I am a life long Baltimore Orioles fan. What could possibly be better than Baseball & Vector art!

Logo variations and website looks will start this afternoon.

Wednesday, January 7, 2015

Updated SVG Editor link and features

First of all, the SVG Editor has a new link and is now at

1) Since my last post, Grouping objects is possible.  Draw a few objects on the canvas and you will see the possibilities directly above to Group and Ungroup.

2) Bugs with the Bezier draw have been fixed.  After you draw, single click in the center of the object and you will see on the properties palette (to the right of the canvas), that you will be able to change a straight line to a curve, add or delete a node and open or close path.  Imagine a rectangle that has only 3 sides with a black border (stroke).  Use Close path to complete the border (add a 4th side).

3) A bug with manually Editing the size and cordinates has been resolved.

4) A bug with using your arrow keys for selecting and moving an object incrementally up/down/right/left has been resolved.

5) Variable data and datasources is in progress.

6) A bug with the SVG Source (got to View -> SVG Source) that disallowed the source from Validation was fixed.

7) Print and Preview buttons now work.  We have tested on our own printers and so far, so good.

Should see many new features by mid - February.  Once again, if you have interest in any kind of partnership, go to: and fill in the form.