Understanding and Creating SVG tutorial
By Robert Keen
How to create your own fractal SVG files to be used in the SVG.variation.
Time needed: 30 minutes.
- Getting to know the svg_wf and its variable
Start by selecting the nonlinear tab under the Transformations tab. Add Linear 3d & change to svg_wf from the drop down box. Click the green flag and that gives you sliders to stretch and scale the svg. You can also control the color and resolution as it is stretched. This is important to know as the graphic gets stretched. (Note – SVG stands for scalable vector graphic and can be scaled with out loss of quality)
- Color Tab
Click on color tab, Zoom to 5, you want your svg fairly small
- Step 2 – How to Create a image transparent flame render
To start – Click New from scratch to start a new flame. We will keep it simple
- Add Transforms
Add transform 1 and leave as linear 3d, Add transform 2 var 1 and change to pie 3d, add variation 2 dc_bubble to give it stripes
Scale Pie 3d & dc bubble to your liking. I keep my flames small for svg creation.
Do a quick render
Select a gradient choice
- Step 3 – How to Create a image transparent flame render_ setting resolution
Change your resolution to 300×300 and a quality of about 400 or your preference
- Camera Tab
Select the camera tab and zoom to 1.25 & pix’s per unit to 120. This fractal needs to be close to all 4 sides.
- How to Create a image transparent flame render _ setting the transparency
To start – Select the Color Tab at the bottom_ Circled
- Background Tansparency
Start by clicking a check mark into the back ground transparency. This eliminates the black from being read during conversion to svg. (Note – Make sure you unchecked it when done or all your flames will be transparent!)
Click RENDER to render a transparent PNG file and save to a *folder of your choice. See step 10 for options and links
- Convert to SVG
Next step is to convert to SVG. You will have to use a online converter.
Using a online png to svg converter
Go to Convert to SVG – Convert all kinds of images to SVG (img2go.com)
- Choose your png transparency file to upload
- Make sure target format is set to SVG
- Image size for this one was set to 200 x 200
- Click convert file
Click convert file and result will show in the output file: Click on output file and webpage image will pop up. Right mouse click resulting image and save to a folder of
- Importing your SVG file
Add svg_wf for transform 1 = default Pink Lizard
- Set zoom to 10
- Choosing your SVG
Click on Gear and navigation dialog box opens. Navigate to where your SVG file is located.
- Load SVG
Select your svg file to load into the svg_wf transform and click open. It will replace the Pink Lizard with your svg file that you select or the one you created from the conversion.
That’s it !!
- Image Result & Render
Your image now switches to the new SVG file and should be rendered for future use, I have included fractal SVG file’s that I created and will indicate JWF as part of the file name. All others are from free svg web sites.
- Examples of svg use
Some examples showing Bubble Pie SVG and Menger Cube SVG