Clones SVG Optimization 02

Description: Lesson 02 ClonesDownload the drawing and examine the codeline 1 Add xlink to svg tag so we can do clonesline 3 Create a mountain shape an inverted V then move to a new location and create a little v shape Give this an idline 5 Make a clone by referring to the id Move the clone to this XY coordinates Translate does not operate in in intuitive way it actually moves the entire grid to the new coordinatesline 6 Make a clone move it and scale it toolines810 Create some big mountain clones beside each otherlines 1213 Create some small mountain clones between themline 15 You can clone a set of objects too This is called a group Create a group named myeye consisting of a big circle and a small black circle inside itline 19 create a clone to make the second eye and move itline 21 You can rotate move and scale a clone all at once this creates a rotated eye moved and scaled The rotation is 30 degrees and it rotates around centerX and centerY of 00 Since the translates works so strangely I had to experiment with it to find coordinates of 700250To maintain a 2px stroke width for each mountain you can also create the original with no stroke width and then specify a stroke width on each clone I did not do that so you see scaled strokes also

By: SunKing2

Date: 2018-01-13

Block Explorer: View Transaction

Downloads: 100

Filesize: 1038

Tags: Clones optimization remix294247 SVG Tutorial

Download

Large PNG 2400px

Medium PNG 800px

Small PNG 300px

Javascript is needed to download PNG's.


Clones SVG Optimization 02 sourced from Openclipart is licensed under CC0 1.0

* Note: Date might not match original source and might be an educated guess.