Computationally Efficient SVG character paths that scale well

Computationally Efficient SVG character paths that scale well - svg

I have just spent most of the last two days drawing computationally efficient svg paths for each of the A-Z characters of the Arial Rounded MT Bold font family. I needed these paths to cut out character shapes from other svg shapes and as my program does this very very frequently I want the paths to be as light as possible. I also wanted them to scale well up to 512px.
Whilst I know that I could have done this automatically in Inkscape by drawing text objects and converting the text objects to paths, the Inkscape generated paths are at least twice and sometimes over three times the size of the paths I include below.
My question is how could I have saved the last two days of my life which I will never get back. I could not find any online resource or tool to generate efficient svg paths for text characters of a chosen font family. Neither could I find any definitions anywhere of the cubic bezier curves used by each of the font characters. If I could have found the latter I would have written a program to do it as it is I had to use trial and error.
My SVG paths are listed below each positioned centrally on a 32x32 grid with a 28pt font size and they will all scale up to 512 pt with very close match to the original font.
svg { width: 28pt; }
<!-- A --><svg viewbox="0 0 32 32"><path d="
M 13.6 7 C 15 5 17.3 5 18.6 7 L 25.4 24 A 2 2 180 0 1 22.1 25.8 L 20 21.2 L 12 21.2 L 10.2 25.8 A 2 2 180 0 1 6.9 24 Z M 13.5 17 L 18.5 17 L 16 10 Z
" /></svg>
<!-- B --><svg viewbox="0 0 32 32"><path d="
M 19 6 C 26 7 24.5 14.6 21 15.4 C 26.2 16.4 27 25.2 19 26 L 10.3 26 A 2 2 90 0 1 8.3 24 L 8.3 8 A 2 2 90 0 1 10.3 6 Z M 12.3 9 L 12.3 14.2 L 17 14.2 C 21.1 14.2 21.1 9 17 9 Z M 12.3 17.4 L 12.3 23 L 17.5 23 C 22 23 22 17.4 17.5 17.4 Z
" /></svg>
<!-- C --><svg viewbox="0 0 32 32"><path d="
M 24.3 19.5 C 24.3 22.5 21.8 26.3 17 26.3 C 2.9 27.3 2.9 4.7 17 5.7 C 20.8 5.7 24.1 7.9 24.3 12 A 1.8 1.8 180 0 1 21.3 13 C 20.9 12 19.5 9.2 17 8.8 C 8.4 7.7 8.4 24.3 17 23 C 19.2 23 20.7 20.5 21.3 18.5 A 1.7 1.7 180 0 1 24.3 19.5 Z
" /></svg>
<!-- D --><svg viewbox="0 0 32 32"><path d="
M 16 6 C 22.5 6 25.2 10 25.2 16 C 25.2 22 22.5 26 16 26 L 10 26 A 2 2 90 0 1 8 24 L 8 8 A 2 2 90 0 1 10 6 Z M 12.1 9.1 L 12.1 22.8 L 15 22.8 C 20 22.8 21 20 21 16 C 21 12 20 9.1 15 9.1 Z
" /></svg>
<!-- E --><svg viewbox="0 0 32 32"><path d="
M 8.5 7.5 A 1.5 1.5 90 0 1 10 6 L 22.1 6 A 1.5 1.5 180 0 1 22.1 9 L 12.5 9 L 12.5 14 L 21.3 14 A 1.5 1.5 180 0 1 21.3 17 L 12.5 17 L 12.5 22.8 L 22.3 22.8 A 1.6 1.6 180 0 1 22.3 26 L 10.2 26 A 1.6 1.6 90 0 1 8.5 24.5 Z
" /></svg>
<!-- F --><svg viewbox="0 0 32 32"><path d="
M 9 8 A 2 2 90 0 1 11 6 L 21.5 6 A 1.5 1.5 180 0 1 21.5 9 L 13.1 9 L 13.1 14.3 L 20.2 14.3 A 1.5 1.5 180 0 1 20.2 17.3 L 13.1 17.3 L 13.1 24.3 A 2 2 180 0 1 9 24.3 Z
" /></svg>
<!-- G --><svg viewbox="0 0 32 32"><path d="
M 21.8 21.5 L 21.8 18.5 L 17.9 18.5 A 1.5 1.5 180 0 1 17.9 15.5 L 23.9 15.5 A 1.5 1.5 90 0 1 25.4 17 L 25.4 22.5 C 25.4 23.7 21.8 26.3 17 26.3 C 2.9 27.3 2.9 4.7 17 5.7 C 20.8 5.6 24.9 7.9 24.9 11 A 1.9 1.9 180 0 1 21.5 12 C 21 11 19.5 8.7 17 8.7 C 8.1 7.7 8.1 24.3 17 23.3 C 19 23.3 21.8 22.2 21.8 21.5 Z
" /></svg>
<!-- H --><svg viewbox="0 0 32 32"><path d="
M 7.5 7.6 A 2 2 180 0 1 11.5 7.6 L 11.5 13.8 L 20.4 13.8 L 20.4 7.6 A 2 2 180 0 1 24.4 7.6 L 24.4 24.3 A 2 2 180 0 1 20.4 24.3 L 20.4 17.1 L 11.5 17.1 L 11.5 24.3 A 2 2 180 0 1 7.5 24.3 Z
" /></svg>
<!-- I --><svg viewbox="0 0 32 32"><path d="
M 14 7.6 A 2 2 180 0 1 18 7.6 L 18 24.3 A 2 2 180 0 1 14 24.3 Z
" /></svg>
<!-- J --><svg viewbox="0 0 32 32"><path d="
M 18 8 C 17.8 4.8 22.2 4.8 22 8 L 22 20 C 22.2 28.4 8.5 28.4 8.7 20 C 8.7 17.3 12.4 17.3 12.5 20 C 12.5 24.2 18 24.2 18 20 L 18 24 Z
" /></svg>
<!-- K --><svg viewbox="0 0 32 32"><path d="
M 8.5 7.6 A 2 2 180 0 1 12.5 7.6 L 12.5 15.2 L 21.3 6 A 1.9 1.9 180 0 1 24.1 8.6 L 18.6 13.8 L 25 23 C 27 25.9 23.7 27.3 21.8 25.6 L 15.9 16.5 L 12.5 19.8 L 12.5 24.5 A 2 2 180 0 1 8.5 24.5 Z
" /></svg>
<!-- L --><svg viewbox="0 0 32 32"><path d="
M 9 7.6 A 2 2 180 0 1 13 7.6 L 13 22.7 L 21.7 22.7 A 1.6 1.6 180 0 1 21.7 26 L 11 26 A 2 2 90 0 1 9 24 Z
" /></svg>
<!-- M --><svg viewbox="0 0 32 32"><path d="
M 6.3 7.9 A 1.9 1.9 90 0 1 8.2 6 L 10.5 6 C 12.5 6 12.3 6.5 12.6 7 L 16 19.6 L 19.4 7 C 19.8 6.3 20 6 21 6 L 23.7 6 A 1.9 1.9 90 0 1 25.6 7.9 L 25.6 24.5 A 1.8 1.8 180 0 1 22 24.5 L 22 10 L 18.1 25 C 17.1 26.8 14.9 26.8 13.9 25 L 10 10 L 10 24.5 A 1.8 1.8 180 0 1 6.3 24.5 Z
" /></svg>
<!-- N --><svg viewbox="0 0 32 32"><path d="
M 7.6 8 C 7.6 5.9 10.4 4.4 12.1 6.9 L 20.7 20 L 20.6 8 C 20.6 4.8 24.4 4.8 24.4 8 L 24.4 24 C 24.2 27 21 27 19.4 24.5 L 11.4 12.2 L 11.4 24.4 C 11.4 27 7.6 27 7.6 24.4 Z
" /></svg>
<!-- O --><svg viewbox="0 0 32 32"><path d="
M 16 5.6 C 29.1 4.9 29.1 27.1 16 26.3 C 2.9 27.1 2.9 4.9 16 5.6 Z M 16 8.8 C 8.3 8.5 8.3 23.4 16 23.1 C 23.7 23.4 23.7 8.5 16 8.8 Z
" /></svg>
<!-- P --><svg viewbox="0 0 32 32"><path d="
M 17 6 C 26 5.5 26 18.7 16.5 18.2 L 12.4 18.2 L 12.4 24.3 A 2 2 180 0 1 8.4 24.3 L 8.4 8 A 2 2 90 0 1 10.4 6 Z M 12.4 9 L 12.4 15.1 L 16 15.1 C 20.8 15.1 20.8 9 16 9 Z
" /></svg>
<!-- Q --><svg viewbox="0 0 32 32"><path d="
M 16 5.6 C 29.1 4.9 29.1 27.1 16 26.3 C 2.9 27.1 2.9 4.9 16 5.6 Z M 16 8.8 C 8.3 8.5 8.3 23.4 16 23.1 C 23.7 23.4 23.7 8.5 16 8.8 Z M 16.4 19.3 C 17.2 19.3 21.4 22.2 21.5 22.5 C 21.4 22.6 26.8 25.5 26.5 25.5 A 1.4 1.4 180 0 1 25 27.8 C 24.3 27.8 20 25 20 24 C 19 23 15 21 15 21 C 14.2 19.8 15.7 18.9 16.4 19.3 Z
" /></svg>
<!-- R --><svg viewbox="0 0 32 32"><path d="
M 18 6 C 27 5.5 26.6 16.5 19.3 16.9 C 20.9 17.1 25.1 23 25 24.5 C 25 26.9 22.3 26.7 21.4 25.5 L 18 20 C 17 18.5 16.5 17.2 12.4 17.4 L 12.4 24.3 A 2 2 180 0 1 8.4 24.3 L 8.4 8 A 2 2 90 0 1 10.4 6 Z M 12.4 9 L 12.4 14.5 L 17 14.5 C 21.8 14.5 21.8 9 17 9 Z
" /></svg>
<!-- S --><svg viewbox="0 0 32 32"><path d="
M 8.5 12.5 C 6.9 3.3 23 3.9 23 10.5 C 23 12.5 20.5 12.9 19.8 11.5 C 17.9 6.4 11.7 8.6 12.1 11 C 12.1 11.5 12 13 18 14.1 C 21 15.1 23.9 16 23.9 20 C 24 28.4 8 28.5 8 20 C 8.7 18 10.8 18.5 11.3 19.5 L 11.8 20.6 C 13.2 25 20.4 23.8 19.9 20 C 19.9 17.3 14 17.3 11.6 16 C 9.6 15 9 14 8.5 12.5 Z
" /></svg>
<!-- T --><svg viewbox="0 0 32 32"><path d="
M 22.9 6 A 1.6 1.6 180 0 1 22.9 9.2 L 18 9.2 L 18 24.3 A 2 2 180 0 1 14 24.3 L 14 9.2 L 9.1 9.2 A 1.6 1.6 180 0 1 9.1 6 Z
" /></svg>
<!-- U --><svg viewbox="0 0 32 32"><path d="
M 7.6 7.6 A 2 2 180 0 1 11.6 7.6 L 11.6 18 C 11.6 20.3 12 23.2 16 23.1 C 20 23.1 20.4 20.3 20.4 18 L 20.4 7.6 A 2 2 180 0 1 24.4 7.6 L 24.4 18 C 24.4 23.7 22 26.3 16 26.3 C 10 26.3 7.6 23.7 7.6 18 Z
" /></svg>
<!-- V --><svg viewbox="0 0 32 32"><path d="
M 7.25 8.3 A 1.9 1.9 180 0 1 11 7 L 16 21.8 L 20.9 7 A 1.9 1.9 180 0 1 24.6 8.3 L 18.75 24 C 18.75 24 18.2 26.3 16 26.3 C 13.7 26.3 13 24 13 24 Z
" /></svg>
<!-- W --><svg viewbox="0 0 32 32"><path d="
M 3.4 8 A 1.9 1.9 180 0 1 7.1 7 L 10.1 20.1 L 13.5 7.5 C 13.5 7.5 14 5.6 16 5.6 C 18 5.6 18.5 7.5 18.5 7.5 L 22 20.1 L 24.9 7 A 1.9 1.9 180 0 1 28.6 8 L 24.55 24.5 C 24.55 24.5 24.1 26.3 22.1 26.3 C 20.1 26.3 19.65 24 19.65 24 L 16 10.6 L 12.4 24 C 12.4 24 11.9 26.3 9.9 26.3 C 7.9 26.3 7.45 24.5 7.45 24.5 Z
" /></svg>
<!-- X --><svg viewbox="0 0 32 32"><path d="
M 8.9 8.1 A 1.75 1.75 180 0 1 11.9 6.3 L 16 12.8 L 20.45 6.3 A 1.75 1.75 180 0 1 23.4 8.1 L 18.55 15.5 L 23.65 23.5 A 1.75 1.75 180 0 1 20.44 25.5 L 16 18.6 L 11.45 25.5 A 1.75 1.75 180 0 1 8.3 23.5 L 13.6 15.5 Z
" /></svg>
<!-- Y --><svg viewbox="0 0 32 32"><path d="
M 8.1 8.15 A 1.8 1.8 180 0 1 11.15 6.25 L 16 14.1 L 20.95 6.25 A 1.8 1.8 180 0 1 24 8.15 L 18 17.45 L 18 24.4 A 2 2 180 0 1 14 24.4 L 14 17.45 Z
" /></svg>
<!-- Z --><svg viewbox="0 0 32 32"><path d="
M 10 9 C 7.7 9 7.7 6 10 6 L 21.5 6 C 23.9 6 24.1 8.2 23.4 9.5 L 12.15 23 L 23 23 C 25.3 23 25.3 26 23 26 L 9.5 26 C 7.5 26 6.5 24 7.7 22.5 L 19 9 Z
" /></svg>

I could not find any online resource or tool to generate efficient svg
paths for text characters of a chosen font family.
Try an online resource Google font to SVG path
This resource contains a large set of fonts and with a high degree of probability you will find the one you need
To optimize the SVG path, I used another online resource SVG-Editor
Below are code examples for letters A and D:
A
<svg xmlns="http://www.w3.org/2000/svg" width="56.2" height="67.5" viewBox="0 0 56.2 67.5">
<g stroke-linecap="round" fill-rule="evenodd" font-size="28pt" fill="red" stroke-width="1" >
<path d="M30.4 0L31.5 0A5 5 0 0 1 34.7 1.2Q37 3 39 7.6A115.5 115.5 0 0 1 41.8 14.9Q46.3 27.4 51.6 48.7A34.7 34.7 0 0 0 53.7 54.6 39.6 39.6 0 0 0 54.4 56 59 59 0 0 1 55 57.2Q55.9 59.1 56.1 60A2.3 2.3 0 0 1 56.2 60.5 7.1 7.1 0 0 1 54.3 65.4 6.7 6.7 0 0 1 52.8 66.8 5.4 5.4 0 0 1 50 67.5L48.9 67.5A10.3 10.3 0 0 1 47.1 67.4Q46.1 67.2 45.4 66.8A3.8 3.8 0 0 1 43.6 64.8 1.7 1.7 0 0 1 43.5 64.6Q43.3 64 43.1 62.3 42.9 60.3 42.5 58.4A45.4 45.4 0 0 0 41.8 55.5Q41 52.7 40 50.9A8.3 8.3 0 0 0 39.1 49.7Q37.3 47.6 29.8 47.4A64.5 64.5 0 0 0 27.7 47.4 63.6 63.6 0 0 0 24.1 47.5Q17.9 47.8 16.1 49.5 14.5 51.1 12.7 55.4A58.2 58.2 0 0 0 11.5 58.3 24.2 24.2 0 0 0 10.7 61 30.3 30.3 0 0 0 10.4 62.8 32.2 32.2 0 0 1 10.2 63.8Q9.9 65.5 9.5 66.1A2.6 2.6 0 0 1 8.3 67.1Q7.4 67.5 6 67.5A10.2 10.2 0 0 1 5.9 67.5 6.4 6.4 0 0 1 3.9 67.2 5.2 5.2 0 0 1 1.6 65.6 6.5 6.5 0 0 1 0 61.3 6.4 6.4 0 0 1 0.3 59.4Q0.9 57.5 2.5 55.2 5 51.7 11.8 33.9A661.1 661.1 0 0 0 11.9 33.7 642.7 642.7 0 0 1 15.6 24Q22.8 5.9 25.9 2.3A5.4 5.4 0 0 1 26.3 1.9 9 9 0 0 1 27.6 0.9Q28.5 0.4 29.3 0.1A4.5 4.5 0 0 1 30.4 0ZM25 40.5L31.5 40.5Q37.6 40.5 37.6 39L37.6 38.6Q37.6 37.9 35.1 27.9A1479.3 1479.3 0 0 0 34.3 24.8Q31.1 12.1 30 11.8A0.2 0.2 0 0 0 29.9 11.8L29.7 11.8A0.1 0.1 0 0 0 29.7 11.8Q29.4 12.2 27.9 15.6A404.3 404.3 0 0 0 24.8 22.3Q19.1 35.2 18.8 38.9A4.9 4.9 0 0 0 18.8 39.3L18.8 39.6Q18.8 40.3 20.5 40.3A8.6 8.6 0 0 0 20.7 40.3L21.4 40.4 25 40.5Z" vector-effect="non-scaling-stroke"/>
</g>
</svg>
D
<svg xmlns="http://www.w3.org/2000/svg" width="60.1" height="73.4" viewBox="0 0 60.1 73.4">
<g stroke-linecap="round" fill-rule="evenodd" font-size="28pt" fill="red">
<path d="M23.4 0L25.9 0A48.6 48.6 0 0 1 37.6 1.3Q45.8 3.3 51 8.5A28.5 28.5 0 0 1 57.6 18.6Q60.1 25.1 60.1 33.2L60.1 33.5 60.1 34.8Q60.1 43.2 57.2 51.4A34.7 34.7 0 0 1 53.5 58.7 27.7 27.7 0 0 1 48.5 64.5 35.5 35.5 0 0 1 40.2 69.8 31.8 31.8 0 0 1 36.1 71.4 40 40 0 0 1 30.8 72.6Q28 73 24.7 73.2A95.4 95.4 0 0 1 18.8 73.4L17.6 73.4 16.4 73.4A194.1 194.1 0 0 1 11.8 73.3Q5.5 73.2 2.7 72.6A9.9 9.9 0 0 1 1.7 72.3 2.7 2.7 0 0 1 0.8 71.8Q0.2 71.3 0.1 70.5A3.6 3.6 0 0 1 0 69.8 1.3 1.3 0 0 1 0 69.5Q0.3 68.7 1.4 66.3A18.3 18.3 0 0 0 2.4 63Q3.8 57.6 3.8 47.8A154.8 154.8 0 0 0 3.8 46.9L4.4 31 4.5 28.6 4.7 20.3A419.5 419.5 0 0 0 4.7 17.7Q4.7 12.6 4.5 11.2 4.3 10 3.8 8.4A30.6 30.6 0 0 0 3.5 7.3 39.1 39.1 0 0 1 3.2 6.3Q2.8 5.1 2.7 4.5A2 2 0 0 1 2.7 4.2Q2.7 1.7 6.1 1.1A50.8 50.8 0 0 1 10.1 0.5Q15.4 0 23.4 0ZM15.3 27.1L15.2 28.7 15 33.7 14.9 35.4 14.7 41.2A88.5 88.5 0 0 0 14.7 42Q14.6 43.1 14.6 43.7L14.5 45.4Q14.4 47 14.4 47.8L14.3 49.4A26.8 26.8 0 0 0 14.3 51.1L14.2 52.7 14 58.4 14 61.5A5.1 5.1 0 0 0 14.1 62.8 3 3 0 0 0 15.9 64.9Q17.6 65.7 20.7 65.8A28.2 28.2 0 0 0 21.4 65.8L23.7 65.8A24.2 24.2 0 0 0 32 64.4 20.7 20.7 0 0 0 41.4 57.5Q44.2 53.9 46 48 47.8 42.1 47.8 34.7L47.8 33.8A45.1 45.1 0 0 0 47 25Q44.6 13.1 35.1 8.8 31.3 7.2 26.6 7.2L24.2 7.2Q18.8 7.2 17.2 8.8A2.4 2.4 0 0 0 17 9 4.2 4.2 0 0 0 16.5 10.2Q15.7 12.7 15.7 18.9A278.9 278.9 0 0 0 15.5 21.5Q15.3 25 15.3 27A39.3 39.3 0 0 0 15.3 27.1Z" vector-effect="non-scaling-stroke"/>
</g>
</svg>

Related

What do the numbers mean in this SVG of a logo?

This code is used to display a logo from a reactjs project, but the text of it does not make any sense. What are all the numbers?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

See docs about path in SVG
A path is described using the concept of a current point. In an
analogy with drawing on paper, the current point can be thought of as
the location of the pen. The position of the pen can be changed, and
the outline of a shape (open or closed) can be traced by dragging the
pen in either straight lines or curves.
Paths represent the geometry of the outline of an object, defined in
terms of moveto (set a new current point), lineto (draw a straight
line), curveto (draw a curve using a cubic Bézier), arc (elliptical or
circular arc) and closepath (close the current shape by connecting to
the last moveto) commands. Compound paths (i.e., a path with multiple
subpaths) are possible to allow effects such as "donut holes" in
objects.

That's an svg file. Those numbers are setting the path of the drawing (as the direction of a pencil in paper)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
If you render it , you'll be able to see the icon:
render: function() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
(...) //your svg contents here
</svg>
);
}
Reading this answer, you could also render it like:
import { ReactComponent as logosvg} from './logo.svg';
const App = () => (
<div>
<logosvg/>
</div>
);
Which also would be a lot cleaner, since you don't need to include the entire contents of the svg file in your code.
Regardless of how you render it, the result is this:
So all those numbers inside the path are the ones defining the symbol (guiding the pencil).
Besides the numbers inside <path>, the other elements are also setting its properties. For example, <circle cx="420.9" cy="296.5" r="45.7"/> is the one responsible for drawing the inner circle.
Take that part off and you lose the nucleum (so the logo is not as cool as before):

How do you resize or set the height and width of a Font Awesome 5 SVG?

How do you resize or set the height and width of a Font Awesome 5 SVG? For example why
<path d="m25 43.5000536c0-1.354163.4947901-2.5260352 1.4843715-3.5156166.9895813-.9895813 2.1614535-1.4843714 3.5156166-1.4843714h7.4999821v24.9999404h-7.4999821c-1.3541631 0-2.5260353-.4947901-3.5156166-1.4843715-.9895814-.9895814-1.4843715-2.1614536-1.4843715-3.5156166zm44.9998927-4.999988c1.3541631 0 2.5260353.4947901 3.5156166 1.4843714.9895814.9895814 1.4843715 2.1614536 1.4843715 3.5156166v14.9999643c0 1.354163-.4947901 2.5260352-1.4843715 3.5156166-.9895813.9895814-2.1614535 1.4843715-3.5156166 1.4843715h-7.4999821v-24.9999404zm-29.9999285 24.9999404v-24.9999404h19.9999524v24.9999404zm13.7499673-18.1249568c-.5208325 0-.963539.1822908-1.3281219.5468737-.3645828.3645828-.5468737.8072893-.5468737 1.3281218s.1822909.963539.5468737 1.3281218c.3645829.3645829.8072894.5468737 1.3281219.5468737.5208324 0 .9635389-.1822908 1.3281218-.5468737.3645828-.3645828.5468737-.8072893.5468737-1.3281218s-.1822909-.963539-.5468737-1.3281218c-.3645829-.3645829-.8072894-.5468737-1.3281218-.5468737zm0 7.4999821c-.5208325 0-.963539.1822908-1.3281219.5468737-.3645828.3645829-.5468737.8072893-.5468737 1.3281218s.1822909.963539.5468737 1.3281219c.3645829.3645828.8072894.5468737 1.3281219.5468737.5208324 0 .9635389-.1822909 1.3281218-.5468737.3645828-.3645829.5468737-.8072894.5468737-1.3281219s-.1822909-.9635389-.5468737-1.3281218c-.3645829-.3645829-.8072894-.5468737-1.3281218-.5468737zm-7.4999822-7.4999821c-.5208325 0-.9635389.1822908-1.3281218.5468737-.3645829.3645828-.5468737.8072893-.5468737 1.3281218s.1822908.963539.5468737 1.3281218c.3645829.3645829.8072893.5468737 1.3281218.5468737s.963539-.1822908 1.3281219-.5468737c.3645828-.3645828.5468737-.8072893.5468737-1.3281218s-.1822909-.963539-.5468737-1.3281218c-.3645829-.3645829-.8072894-.5468737-1.3281219-.5468737zm0 7.4999821c-.5208325 0-.9635389.1822908-1.3281218.5468737s-.5468737.8072893-.5468737 1.3281218.1822908.963539.5468737 1.3281219c.3645829.3645828.8072893.5468737 1.3281218.5468737s.963539-.1822909 1.3281219-.5468737c.3645828-.3645829.5468737-.8072894.5468737-1.3281219s-.1822909-.9635389-.5468737-1.3281218c-.3645829-.3645829-.8072894-.5468737-1.3281219-.5468737z" opacity=".25" />
is smaller than,
<path d="M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7 8.5-28.6 53 0 89.4-10.1 89.4-64.4 0-61-77.1-89.6-116.9-44.6-23.5 26.4-17.6 42.1-17.6 157.6 50.7 31 118.3 22 160.4-20.1 24.8-24.8 38.5-58 38.5-93 0-35.2-13.8-68.2-38.8-93.3-24.8-24.8-57.8-38.5-93.3-38.5s-68.8 13.8-93.5 38.5c-.3.3-16 16.5-21.2 23.9l-.5.6c-3.3 4.7-6.3 9.1-20.1 6.1-6.9-1.7-14.3-5.8-14.3-11.8V20c0-5 3.9-10.5 10.5-10.5h241.3c8.3 0 8.3 11.6 8.3 15.1 0 3.9 0 15.1-8.3 15.1H130.3v132.9h.3c104.2-109.8 282.8-36 282.8 108.9 0 178.1-244.8 220.3-310.1 62.8zm63.3-260.8c-.5 4.2 4.6 24.5 14.6 20.6C306 56.6 384 144.5 390.6 144.5c4.8 0 22.8-15.3 14.3-22.8-93.2-89-234.5-57-238.3-38.2zM393 414.7C283 524.6 94 475.5 61 310.5c0-12.2-30.4-7.4-28.9 3.3 24 173.4 246 256.9 381.6 121.3 6.9-7.8-12.6-28.4-20.7-20.4zM213.6 306.6c0 4 4.3 7.3 5.5 8.5 3 3 6.1 4.4 8.5 4.4 3.8 0 2.6.2 22.3-19.5 19.6 19.3 19.1 19.5 22.3 19.5 5.4 0 18.5-10.4 10.7-18.2L265.6 284l18.2-18.2c6.3-6.8-10.1-21.8-16.2-15.7L249.7 268c-18.6-18.8-18.4-19.5-21.5-19.5-5 0-18 11.7-12.4 17.3L234 284c-18.1 17.9-20.4 19.2-20.4 22.6z"></path>
Thanks.

Pandas Computing On Multidimensional Data

I have two data frames storing tracking data of offensive and defensive players during an nfl game. My goal is to calculate the maximum distance between an offensive player and the nearest defender during the course of the play.
As a simple example, I've made up some data where there are only three offensive players and two defensive players. Here is the data:
Defense
GameTime PlayId PlayerId x-coord y-coord
0 1 1 117 20.2 20.0
1 2 1 117 21.0 19.1
2 3 1 117 21.3 18.3
3 4 1 117 22.0 17.5
4 5 1 117 22.5 17.2
5 6 1 117 23.0 16.9
6 7 1 117 23.6 16.7
7 8 2 117 25.1 34.1
8 9 2 117 25.9 34.2
9 10 2 117 24.1 34.5
10 11 2 117 22.7 34.2
11 12 2 117 21.5 34.5
12 13 2 117 21.1 37.3
13 14 3 117 21.2 44.3
14 15 3 117 20.4 44.6
15 16 3 117 21.9 42.7
16 17 3 117 21.1 41.9
17 18 3 117 20.1 41.7
18 19 3 117 20.1 41.3
19 1 1 555 40.1 17.0
20 2 1 555 40.7 18.3
21 3 1 555 41.0 19.6
22 4 1 555 41.5 18.4
23 5 1 555 42.6 18.4
24 6 1 555 43.8 18.0
25 7 1 555 44.2 15.8
26 8 2 555 41.2 37.1
27 9 2 555 42.3 36.5
28 10 2 555 45.6 36.3
29 11 2 555 47.9 35.6
30 12 2 555 47.4 31.3
31 13 2 555 46.8 31.5
32 14 3 555 47.3 40.3
33 15 3 555 47.2 40.6
34 16 3 555 44.5 40.8
35 17 3 555 46.5 41.0
36 18 3 555 47.6 41.4
37 19 3 555 47.6 41.5
Offense
GameTime PlayId PlayerId x-coord y-coord
0 1 1 751 30.2 15.0
1 2 1 751 31.0 15.1
2 3 1 751 31.3 15.3
3 4 1 751 32.0 15.5
4 5 1 751 31.5 15.7
5 6 1 751 33.0 15.9
6 7 1 751 32.6 15.7
7 8 2 751 51.1 30.1
8 9 2 751 51.9 30.2
9 10 2 751 51.1 30.5
10 11 2 751 49.7 30.6
11 12 2 751 49.5 30.9
12 13 2 751 49.1 31.3
13 14 3 751 12.2 40.3
14 15 3 751 12.4 40.5
15 16 3 751 12.9 40.7
16 17 3 751 13.1 40.9
17 18 3 751 13.1 41.1
18 19 3 751 13.1 41.3
19 1 1 419 41.3 15.0
20 2 1 419 41.7 15.3
21 3 1 419 41.8 15.4
22 4 1 419 42.9 15.6
23 5 1 419 42.6 15.6
24 6 1 419 44.8 16.0
25 7 1 419 45.2 15.8
26 8 2 419 62.2 30.1
27 9 2 419 63.3 30.5
28 10 2 419 62.6 31.0
29 11 2 419 63.9 30.6
30 12 2 419 67.4 31.3
31 13 2 419 66.8 31.5
32 14 3 419 30.3 40.3
33 15 3 419 30.2 40.6
34 16 3 419 30.5 40.8
35 17 3 419 30.5 41.0
36 18 3 419 31.6 41.4
37 19 3 419 31.6 41.5
38 1 1 989 10.1 15.0
39 2 1 989 10.2 15.5
40 3 1 989 10.4 15.4
41 4 1 989 10.5 15.8
42 5 1 989 10.6 15.9
43 6 1 989 10.1 15.5
44 7 1 989 10.9 15.3
45 8 2 989 25.8 30.1
46 9 2 989 25.2 30.1
47 10 2 989 21.8 30.2
48 11 2 989 25.8 30.2
49 12 2 989 25.6 30.5
50 13 2 989 25.5 31.0
51 14 3 989 50.3 40.3
52 15 3 989 50.3 40.2
53 16 3 989 50.2 40.4
54 17 3 989 50.1 40.8
55 18 3 989 50.6 41.2
56 19 3 989 51.4 41.6
The data is essentially multidimensional with GameTime, PlayId, and PlayerId as independent variables and x-coord and y-coord as dependent variables. How can I go about calculating the maximum distance from the nearest defender during the course of a play?
My guess is I would have to create columns containing the distance from each defender for each offensive player, but I don't know how to name those and be able to account for an unknown amount of defensive/offensive players (the full data set contains thousands of players).

Here is a possible solution , I think there is a way to making it more efficient :
Assuming you have a dataframe called offense_df and a dataframe called defense_df:
In the merged dataframe you'll get the answer to your question, basically it will create the following dataframe:
from scipy.spatial import distance
merged_dataframe = pd.merge(offense_df,defense_df,on=['GameTime','PlayId'],suffixes=('_off','_def'))
GameTime PlayId PlayerId_off x-coord_off y-coord_off PlayerId_def x-coord_def y-coord_def
0 1 1 751 30.2 15.0 117 20.2 20.0
1 1 1 751 30.2 15.0 555 40.1 17.0
2 1 1 419 41.3 15.0 117 20.2 20.0
3 1 1 419 41.3 15.0 555 40.1 17.0
4 1 1 989 10.1 15.0 117 20.2 20.0
The next two lines are here to create a unique column for the coordinates , basically it will create for the offender (coord_off) and the defender a column (coord_def) that contains a tuple (x,y) this will simplify the computation of the distance.
merged_dataframe['coord_off'] = merged_dataframe.apply(lambda x: (x['x-coord_off'], x['y-coord_off']),axis=1)
merged_dataframe['coord_def'] = merged_dataframe.apply(lambda x: (x['x-coord_def'], x['y-coord_def']),axis=1)
We compute the distance to all the defender at a given GameTime,PlayId.
merged_dataframe['distance_to_def'] = merged_dataframe.apply(lambda x: distance.euclidean(x['coord_off'],x['coord_def']),axis=1)
For each PlayerId,GameTime,PlayId we take the distance to the nearest defender.
smallest_dist = merged_dataframe.groupby(['GameTime','PlayId','PlayerId_off'])['distance_to_def'].min()
Finally we take the maximum distance (of these minimum distances) for each PlayerId.
smallest_dist.groupby('PlayerId_off').max()

why am I getting a too many indexers error?

cars_df = pd.DataFrame((car.iloc[:[1,3,4,6]].values), columns = ['mpg', 'dip', 'hp', 'wt'])
car_t = car.iloc[:9].values
target_names = [0,1]
car_df['group'] = pd.series(car_t, dtypre='category')
sb.pairplot(cars_df)
I have tried using .iloc(axis=0)[xxxx] and making a slice into a list and a tuple. no dice. Any thoughts? I am trying to make a scatter plot from a lynda.com video but in the video, the host is using .ix which is deprecated. So I am using .iloc[]
car = a dataframe
a few lines of data
"Car_name","mpg","cyl","disp","hp","drat","wt","qsec","vs","am","gear","carb"
"Mazda RX4",21,6,160,110,3.9,2.62,16.46,0,1,4,4
"Mazda RX4 Wag",21,6,160,110,3.9,2.875,17.02,0,1,4,4
"Datsun 710",22.8,4,108,93,3.85,2.32,18.61,1,1,4,1
"Hornet 4 Drive",21.4,6,258,110,3.08,3.215,19.44,1,0,3,1
"Hornet Sportabout",18.7,8,360,175,3.15,3.44,17.02,0,0,3,2
"Valiant",18.1,6,225,105,2.76,3.46,20.22,1,0,3,1
"Duster 360",14.3,8,360,245,3.21,3.57,15.84,0,0,3,4
"Merc 240D",24.4,4,146.7,62,3.69,3.19,20,1,0,4,2
"Merc 230",22.8,4,140.8,95,3.92,3.15,22.9,1,0,4,2
"Merc 280",19.2,6,167.6,123,3.92,3.44,18.3,1,0,4,4
"Merc 280C",17.8,6,167.6,123,3.92,3.44,18.9,1,0,4,4
"Merc 450SE",16.4,8,275.8,180,3.07,4.07,17.4,0,0,3,3

I think you want select multiple columns by iloc:
cars_df = car.iloc[:, [1,3,4,6]]
print (cars_df)
mpg disp hp wt
0 21.0 160.0 110 2.620
1 21.0 160.0 110 2.875
2 22.8 108.0 93 2.320
3 21.4 258.0 110 3.215
4 18.7 360.0 175 3.440
5 18.1 225.0 105 3.460
6 14.3 360.0 245 3.570
7 24.4 146.7 62 3.190
8 22.8 140.8 95 3.150
9 19.2 167.6 123 3.440
10 17.8 167.6 123 3.440
11 16.4 275.8 180 4.070
sb.pairplot(cars_df)
Not 100% sure with another code, it seems need:
#select also 9. column
cars_df = car.iloc[:, [1,3,4,6,9]]
#rename 9. column
cars_df = cars_df.rename(columns={'am':'group'})
#convert it to categorical
cars_df['group'] = pd.Categorical(cars_df['group'])
print (cars_df)
mpg disp hp wt group
0 21.0 160.0 110 2.620 1
1 21.0 160.0 110 2.875 1
2 22.8 108.0 93 2.320 1
3 21.4 258.0 110 3.215 0
4 18.7 360.0 175 3.440 0
5 18.1 225.0 105 3.460 0
6 14.3 360.0 245 3.570 0
7 24.4 146.7 62 3.190 0
8 22.8 140.8 95 3.150 0
9 19.2 167.6 123 3.440 0
10 17.8 167.6 123 3.440 0
11 16.4 275.8 180 4.070 0
#add parameetr hue for different levels of a categorical variable
sb.pairplot(cars_df, hue='group')

How to scale a Vector path created in raphaeljs with the browser size?

I've drawn the following Facebook icon for the raphaeljs library, now I want the icon to resize when the browser size is resized. How can I create a responsive icon with Raphael?
var paper = Raphael(10, 10, 800, 800);
FacebookBack=paper.path('M 285.5 270.5 C 285.5 277.1 280.1 282.5 273.5 282.5 L 18.5 282.5 C 11.9 282.5 6.5 277.1 6.5 270.5 L 6.5 19.5 C 6.5 12.9 11.9 7.5 18.5 7.5 L 273.5 7.5 C 280.1 7.5 285.5 12.9 285.5 19.5 L 285.5 270.5Z');
FacebookBack.attr({'fill':'#787887','stroke':'#000000','stroke-miterlimit':'10'});
F=paper.path('M 133.8 102.8 L 160.8 102.8 L 160.8 90.5 L 160.8 78.5 L 160.8 76.5 C 160.8 65 161.1 47.1 169.5 36.1 C 178.3 24.4 190.5 16.4 211.4 16.4 C 245.4 16.4 259.8 21.3 259.8 21.3 L 253 61.3 C 253 61.3 241.8 58 231.3 58 C 220.8 58 211.4 61.8 211.4 72.3 L 211.4 76.5 L 211.4 90.5 L 211.4 102.8 L 254.4 102.8 L 251.4 141.8 L 211.4 141.8 L 211.4 277.5 L 160.8 277.5 L 160.8 141.8 L 133.8 141.8 L 133.8 102.8 L 133.8 102.8Z');
F.attr({fill:'#ffffff'});
LowerLight=paper.path('M 8.3 231.5 C 8.3 220.5 17.2 211.5 28.3 211.5 L 258.3 211.5 C 269.3 211.5 278.3 220.5 278.3 231.5 L 278.3 257.6 C 278.3 268.6 269.3 277.6 258.3 277.6 L 28.3 277.6 C 17.2 277.6 8.3 268.6 8.3 257.6 L 8.3 231.5 L 8.3 231.5Z');
LowerLight.attr({'fill':'#ffffff','stroke':'none','stroke-width':'0','fill-opacity':'0.2','stroke-opacity':'0'});
UpperLight=paper.path('');
UpperLight.attr({'fill':'#fffM 0 123.9 C 39.9 138.9 89.9 147.7 144.3 147.7 C 198.3 147.7 248.2 138.9 288 124.1 L 288 25 C 288 11.2 276.8 0 263 0 L 25 0 C 11.2 0 0 11.2 0 25 L 0 123.9 L 0 123.9Zfff','stroke':'none','stroke-width':'0','fill-opacity':'0.2','stroke-opacity':'0'});
var FacebookLogo=paper.set(FacebookBack,F,LowerLight,UpperLight);

Thanks to
Dmitry Baranovskiy
I got my answer:
var FacebookLogo = paper.set(FacebookBack,F,LowerLight,UpperLight).transform("s0.25,0.25,0,0");
Click here for a working Example

Develop Reference

node.js excel linux python-3.x azure haskell apache-spark rust .htaccess string

Computationally Efficient SVG character paths that scale well - svg

Related

What do the numbers mean in this SVG of a logo?

How do you resize or set the height and width of a Font Awesome 5 SVG?

Pandas Computing On Multidimensional Data

why am I getting a too many indexers error?

How to scale a Vector path created in raphaeljs with the browser size?

Categories

Resources