The scalable vector graphics with human drawings, such as this one →
Is there any technical name reserved or used for them or through which they are identified?
They must be made from Adobe Illustrator.
1 Like
I call them “vector graphic”. Human or not. Suffix .ai .svg etc
2 Likes
2 Likes
Hi there codeispoetry,
here is the just the code used for the female(?) character,
but slightly adjusted to be responsive ( 
)…
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 30 1320 556">
<ellipse cx="763.62849" cy="564.53301" rx="121.07731" ry="12"
fill="#e6e6e6"/>
<path
d="M880.63206,295.92979l7.38726,73.05167h60.7943l-2.92207-111.03854c0-23.90017-16.52223-44.805-40.42192-44.805s-39.44791,19.93084-39.44791,43.831l-3.89609,112.01256h9.9121Z"
transform="translate(-157.6471 -161.73349)"
fill="#2f2e41"/>
<path
d="M916.96859,679.01334s-2.624,16.61862-6.99731,19.24261,22.74127,8.74664,22.74127,8.74664l4.37332-26.23992Z"
transform="translate(-157.6471 -161.73349)"
fill="#fbbebe"/>
<path
d="M949.33117,489.2112l9.62131,11.37064-4.37332,39.35989-3.49866,77.84511s6.99731,67.34915,0,69.09848-38.48523.87466-37.61056-3.49866,1.74933-7.872,3.49865-13.99463-1.74932-27.98925-1.74932-27.98925l4.37332-24.4906-15.744-105.83437Z"
transform="translate(-157.6471 -161.73349)"
fill="#2f2e41"/>
<path
d="M917.84326,695.632s-9.62131-1.74933-10.496,0S889.854,715.74923,887.23,715.74923s-21.8666,17.49329-1.74933,18.36795,53.35452-14.86929,53.35452-14.86929-4.89134-22.25712-4.63233-21.1872S917.84326,700.00528,917.84326,695.632Z"
transform="translate(-157.6471 -161.73349)"
fill="#2f2e41"/>
<path
d="M907.34729,655.3974s24.4906,27.11459,25.36526,29.73859,13.99463,0,13.99463,0l5.248-17.49329-4.37332-6.12265-24.4906-20.11727Z" transform="translate(-157.6471 -161.73349)"
fill="#fbbebe"/>
<path
d="M942.33386,675.51468,929.65123,687.4522s16.18128,24.79838,16.18128,27.42237.87467,24.4906,9.62131,20.99194,9.62131-38.48522,9.62131-38.48522-.87467-35.86124-6.12265-38.48523-16.75024-1.795-16.75024-1.795S949.33117,674.64,942.33386,675.51468Z"
transform="translate(-157.6471 -161.73349)"
fill="#2f2e41"/>
<path
d="M869.73673,411.36609s-4.37332,13.99463-5.248,17.49328-6.12265,13.12-6.12265,27.98926,1.74933,32.36257,0,34.1119-29.73858,99.71172-17.49328,110.20769,52.47985,45.48254,55.10384,49.85586,3.49866,14.86929,8.74665,13.12,25.36526-19.24262,26.23992-22.74127-11.37063-9.62131-11.37063-9.62131-24.4906-35.86123-30.61325-34.98657-5.248-4.37332-4.37332-6.99731,2.624-4.37332,0-4.37332-.87467-6.99732,0-10.496S905.598,524.19777,905.598,524.19777l53.35452-23.61593s-2.624-63.85049-21.86661-81.34377l-4.37332-10.496S883.73135,405.24344,869.73673,411.36609Z"
transform="translate(-157.6471 -161.73349)"
fill="#2f2e41"/>
<path
d="M891.60333,273.16914s4.37332,30.61325-6.12265,32.36258-19.24261.87466-19.24261,1.74933S892.478,335.2703,892.478,335.2703l24.49059-1.74933L938.8352,309.905s-20.11728-3.49866-20.11728-15.744-.87466-20.99194-.87466-20.99194Z"
transform="translate(-157.6471 -161.73349)"
fill="#ffb8b8"/>
<circle cx="747.51353" cy="97.00369" r="27.11459"
fill="#ffb8b8"/>
<path
d="M889.33645,303.305s-42.341,3.97608-44.965,15.34671,17.49329,82.21844,20.11728,88.34109,1.74933,10.496,1.74933,10.496a34.60715,34.60715,0,0,1,27.98925-6.12265c16.61862,3.49866,40.23456,1.74933,40.23456,1.74933s7.872-32.36258,9.6213-35.86124,8.74665-22.74127,8.74665-27.98925,10.496-27.11459,10.496-27.11459-5.248-15.744-24.4906-14.86929c0,0-8.39344-3.75674-10.7567-1.00371s-15.48323,14.99833-32.10185,9.75035S889.33645,303.305,889.33645,303.305Z"
transform="translate(-157.6471 -161.73349)"
fill="#e6e6e6"/>
<path
d="M946.70718,317.777l16.61862,4.37332s12.2453,44.60787,13.12,45.48254,1.74933,6.12265,1.74933,6.12265,0,.87466,1.74933,3.49865,4.37332.87467,2.624,4.37333-4.37332,1.74932-2.624,5.248.87466,13.12.87466,13.12-4.37332-16.61862-20.11728-12.2453l-10.496-47.23186Z"
transform="translate(-157.6471 -161.73349)"
fill="#e6e6e6"/>
<polygon
points="794.553 164.416 794.493 164.616 765.683 255.376 746.773 251.176 726.323 246.637 755.193 153.046 794.553 164.416"fill="#40e2c3"/>
<path
d="M861.29282,317.777l-16.61862,4.37332s-12.2453,44.60787-13.12,45.48254-1.74933,6.12265-1.74933,6.12265,0,.87466-1.74933,3.49865-4.37332.87467-2.624,4.37333,4.37332,1.74932,2.624,5.248-.87466,13.12-.87466,13.12,4.37332-16.61862,20.11728-12.2453l10.496-47.23186Z"
transform="translate(-157.6471 -161.73349)"
fill="#e6e6e6"/>
<path
d="M832.4289,385.12616l-5.46422,9.13177s-2.40775,17.10816,9.83754,17.10816,29.73859-16.61862,29.73859-16.61862,8.74664-3.49866,13.99463-2.624,34.1119,0,21.8666-14.8693-33.23724,0-33.23724,0l-21.8666,10.496-11.37064-6.12264Z"
transform="translate(-157.6471 -161.73349)"
fill="#ffb8b8"/>
<path
d="M839.86355,373.3182l8.74664,13.99462s-20.11728,2.624-21.8666,6.99732,7.872-22.74127,7.872-22.74127Z" transform="translate(-157.6471 -161.73349)"
fill="#e6e6e6"/>
<path
d="M882.5801,249.17672c17.61432-9.49644,24.85-9.09431,46.75307,0l5.84413-14.23842a10.12353,10.12353,0,0,0-10.11213-10.11214H885.87409A10.12353,10.12353,0,0,0,875.762,234.9383Z"
transform="translate(-157.6471 -161.73349)"
fill="#2f2e41"/>
<polygon
points="794.493 164.616 765.683 255.376 746.773 251.176 775.193 159.046 794.493 164.616"
opacity="0.2"/>
<polygon
points="781.188 159.044 752.324 252.633 791.684 261.379 820.548 170.414 781.188 159.044"
fill="#40e2c3"/>
<path
d="M975.5711,385.12616l5.46422,9.13177s2.40775,17.10816-9.83754,17.10816-29.73859-16.61862-29.73859-16.61862-8.74664-3.49866-13.99463-2.624-34.1119,0-21.8666-14.8693,33.23724,0,33.23724,0l21.8666,10.496,11.37064-6.12264Z"
transform="translate(-157.6471 -161.73349)"
fill="#ffb8b8"/>
<path
d="M968.13645,373.3182l-8.74664,13.99462s20.11728,2.624,21.8666,6.99732-7.872-22.74127-7.872-22.74127Z"
transform="translate(-157.6471 -161.73349)"
fill="#e6e6e6"/>
</svg>coothead
1 Like
Hi there @coothead,
Thanks for your reply. I was looking to search correctly on udemy to learn to create such drawings(Scalable) → SVG.
Hi there codeispoetry,
you might find the tutorial here…
MDN - Scalable Vector Graphics tutorial
…to be helpful and it is free.
coothead
1 Like
Thank you so much. Please tell me one more thing. Can they be also designed using Adobe’s software?
Illustrator is just one of many graphics programmes that can produce SVG.
They can also be created just by writing the code in an editor. But the GUI and visual feedback of graphics apps may be more intuitive for more complex or creative images.
3 Likes
Hi there codeispoetry,
if you learned how to code the various svg elements
then you would only need a decent text editor such
as “Sublime Text” or Notepad++".
As for “Adobe” products, well, they come at great
expense so you might like to look at something like
“Inkscape” which is free.
Personally, I would suggest that you just use a sheet
of “Graph paper” and you favourite text editor. 
coothead
2 Likes
Hi there codeispoetry,
if you are interested in what the 21 individual
pieces of the female(?) character may look like
then have a wee peep here…
https://codepen.io/coothead/full/qBaYgrq
coothead
2 Likes
Hi there @coothead,
Thank you for providing the insight. I have worked with SVG two times in the past and used to change settings such as colors with CSS, but never had experience with their JS animation part.
I also had a notion that they can be built only on Adobe Illustrator and Inkspace kind of software but never had the slightest imagination that they can be coded in editors. I will explore more. Thank you so much for investing time, and creating Codepen to helping to understand.
1 Like
When you export from such graphic editors, the resulting file, when opened in a text editor, is nothing more than XML style code. So there is no reason that code could not be produced by typing manually, or any other means to produce code, like server-side programming for example.
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.