File talk:5proc s.svg
Special progress bars
[edit]There are quite a lot of progress icons. Among many others, are there more than 80 SVG files "Rio de Janeiro 2016 Summer Olympics bid icon..." (not yet specific categorized) showing the progress.
It is possible to create each SVG file with a size of 1.3 KB, instead of the large size (> 9 KB) they got by Inkscape/Sodipodi, by a simplified (not optimized!) coding.
The following text can be used for each of the files, just replacing the color (#65E249)
- #015498 for blue
- #06884C for darkgreen
- #85C026 for green
- #F5AD00 for orange
The grouping opacity instruction must either
- be set preceding the appropriate line as above (5...95%),
- or removed together with the final </g> (100%),
- or removed by adding it to the <g fill=-line (0%).
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" width="450" height="450">
<g fill="#65E249" stroke="#666" id="s">
<path d="M225,225L226,4 a221,221 0 0,1 60,8.5z"/></g>
<use xlink:href="#s" transform="rotate(18 225,225)"/>
<use xlink:href="#s" transform="rotate(36 225,225)"/>
<use xlink:href="#s" transform="rotate(54 225,225)"/>
<use xlink:href="#s" transform="rotate(72 225,225)"/>
<g opacity=".25">
<use xlink:href="#s" transform="rotate(90 225,225)"/>
<use xlink:href="#s" transform="rotate(108 225,225)"/>
<use xlink:href="#s" transform="rotate(126 225,225)"/>
<use xlink:href="#s" transform="rotate(144 225,225)"/>
<use xlink:href="#s" transform="rotate(162 225,225)"/>
<use xlink:href="#s" transform="rotate(180 225,225)"/>
<use xlink:href="#s" transform="rotate(198 225,225)"/>
<use xlink:href="#s" transform="rotate(216 225,225)"/>
<use xlink:href="#s" transform="rotate(234 225,225)"/>
<use xlink:href="#s" transform="rotate(252 225,225)"/>
<use xlink:href="#s" transform="rotate(270 225,225)"/>
<use xlink:href="#s" transform="rotate(288 225,225)"/>
<use xlink:href="#s" transform="rotate(306 225,225)"/>
<use xlink:href="#s" transform="rotate(324 225,225)"/>
<use xlink:href="#s" transform="rotate(342 225,225)"/>
</g></svg>
This excample has another angle orientation than the Rio files, that depends just on the first definition with id="s". As well it was possible to define it in a <defs> clause, and choose arbitrary transformation=rotate angles.
Considerations for more simplification
[edit]- The first <g> clause (line 3 and 4) is just for better showing. Putting all in one line would be
<path id="s" fill="#C86675" stroke="#666" d="M225,225L226,4 a221,221 0 0,1 60,8.5z"/>
- with the same output.
- Using viewBox="-225 -225 450 450" allows to strip the repeated " 225,225" in any rotate instruction.
- Instead of always cloning the first element, larger cloning groups can be formed for iterative (cascaded) cloning:
- 1st is one element,
- 2nd is two elements,
- 3rd is four elements,
- 4th is eight elements and so on.
Using this, 60% will look like
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" width="450" height="450" viewBox="-225 -225 450 450">
<g id="v"><g id="u"><g id="t">
<path id="s" fill="#C86675" stroke="#666" d="M0,0 1-221a221,221 0 0,1 60,8.5z"/>
<use xlink:href="#s" transform="rotate(18)"/></g>
<use xlink:href="#t" transform="rotate(36)"/></g>
<use xlink:href="#u" transform="rotate(72)"/></g>
<use opacity=".25" xlink:href="#v" transform="rotate(216)"/>
<use xlink:href="#v" transform="rotate(72)"/>
</svg>
and increasing the angle in the last line from 72° to 90° gives 65% like
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" width="450" height="450" viewBox="-225 -225 450 450">
<g id="v"><g id="u"><g id="t">
<path id="s" fill="#C86675" stroke="#666" d="M0,0 1-221a221,221 0 0,1 60,8.5z"/>
<use xlink:href="#s" transform="rotate(18)"/></g>
<use xlink:href="#t" transform="rotate(36)"/></g>
<use xlink:href="#u" transform="rotate(72)"/></g>
<use opacity=".25" xlink:href="#v" transform="rotate(216)"/>
<use xlink:href="#v" transform="rotate(90)"/>
</svg>
both diagrams needing now only 552 bytes. An angle of 108° gives 70%, 126° gives 75%. Other percentages need other calculations.
- 100proc.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 00.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 05.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 10.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 15.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 20.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 25.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 30.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 35.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 40.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 45.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 50.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 55.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 60.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 65.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 70.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 75.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 80.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 85.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 90.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (blue) 95.svg
- Rio de Janeiro 2016 Summer Olympics icon (blue).svg (100%)
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 00.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 05.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 10.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 15.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 20.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 25.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 30.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 35.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 40.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 45.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 50.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 55.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 60.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 65.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 70.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 75.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 80.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 85.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 90.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (orange) 95.svg
- Rio de Janeiro 2016 Summer Olympics icon (orange).svg (100%)
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 00.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 05.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 10.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 15.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 20.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 25.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 30.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 35.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 40.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 45.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 50.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 55.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 60.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 65.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 70.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 75.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 80.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 85.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 90.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (green) 95.svg
- Rio de Janeiro 2016 Summer Olympics icon (green).svg (100%)
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 00.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 05.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 10.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 15.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 20.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 25.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 30.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 35.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 40.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 45.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 50.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 55.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 60.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 65.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 70.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 75.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 85.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 80.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 90.svg
- Rio de Janeiro 2016 Summer Olympics bid icon (dark green) 95.svg
- Rio de Janeiro 2016 Summer Olympics icon (dark green).svg (100%)