Twig: SVG logo

[JimiC]

Looking everywhere for an SVG version of the logo with no luck.
Would really love to see it in vscode-icons
Other ppl are looking for it also (https://github.com/gilbarbara/logos/issues/128)

[robfrawley]

What is the Twig logo? If you can point me to a high-resolution raster image, and assuming a vector version does not yet exist, I'll happily create a vector version (assuming the Twig team is interested in having it).

[JimiC]

[axten]

a svg logo would be great!
twig.js has a similar issue: #474

[stof]

well, reproducing the existing logo in SVG might be hard, as it relies on gradients a lot.

[gsouf]

@stof, who told svg and gradients are incompatibles?

http://svgur.com/i/1j0.svg

:)

[JimiC]

@gsouf If the shadow around the "eyes" where also an SVG filter then the image you post would be a "true" SVG.

[robfrawley]

You'll notice the SVG source

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="249" height="249" viewBox="0 0 249 249"><radialGradient id="a" cx="124.0156" cy="220.1201" r="32.6243" gradientTransform="matrix(1 0 0 .237 0 167.96)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#323232" stop-opacity=".92"/><stop offset=".1302" stop-color="#363636" stop-opacity=".7972"/><stop offset=".2665" stop-color="#434343" stop-opacity=".6687"/><stop offset=".4055" stop-color="#585858" stop-opacity=".5375"/><stop offset=".5465" stop-color="#757575" stop-opacity=".4045"/><stop offset=".6891" stop-color="#9B9B9B" stop-opacity=".2701"/><stop offset=".8322" stop-color="#C9C9C9" stop-opacity=".1351"/><stop offset=".9755" stop-color="#FFF" stop-opacity="0"/></radialGradient><ellipse fill="url(#a)" cx="124.016" cy="220.12" rx="34.084" ry="7.039"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="122.4741" y1="169.4248" x2="122.4741" y2="14.673"><stop offset="0" stop-color="#3D6A06"/><stop offset=".1601" stop-color="#588710"/><stop offset=".3296" stop-color="#6D9D18"/><stop offset=".5135" stop-color="#7BAE1E"/><stop offset=".7208" stop-color="#84B721"/><stop offset="1" stop-color="#87BA22"/></linearGradient><path fill="url(#b)" d="M111.974 204.341h22.75c-1.389-29.562-9.992-123.875-24.5-182.5 2.625 40.25 5.5 174 1.75 182.5z"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="115.7788" y1="204.5967" x2="115.7788" y2="22.0967"><stop offset="0" stop-color="#BBE882"/><stop offset=".1446" stop-color="#BEE988" stop-opacity=".9176"/><stop offset=".3443" stop-color="#C8EC9A" stop-opacity=".8037"/><stop offset=".5761" stop-color="#D8F2B7" stop-opacity=".6716"/><stop offset=".83" stop-color="#EEF9E0" stop-opacity=".5269"/><stop offset="1" stop-color="#FFF" stop-opacity=".43"/></linearGradient><path opacity=".28" fill="url(#c)" d="M111.974 204.597h9.284c1.14-66.734-11.034-182.5-11.034-182.5 2.625 40.25 5.5 174 1.75 182.5z"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="119.3433" y1="195.4834" x2="119.3433" y2="32.7563"><stop offset="0" stop-color="#48790B"/><stop offset=".8221" stop-color="#FFF" stop-opacity=".43"/></linearGradient><path opacity=".33" fill="url(#d)" d="M112.814 199.318l9.66 2.809s2.368-32.052 5.832-34.501c1.868-12.285-13.484-124.622-17.574-143.701-.169-.698-.337-1.396-.508-2.084 2.394 36.708 4.995 151.167 2.59 177.477z"/><g><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="107.103" y1="218.7783" x2="107.103" y2="163.1318"><stop offset="0" stop-color="#5E7814"/><stop offset=".5093" stop-color="#8AA21F"/><stop offset="1" stop-color="#B1C628"/></linearGradient><path fill="url(#e)" d="M111.349 221.591l14.375.625c.344-27.891-9.75-76.125-37.25-94.875 14 17.375 24.125 38.625 22.875 94.25z"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="105.2163" y1="209.459" x2="106.0728" y2="164.638"><stop offset="0" stop-color="#82AF10"/><stop offset=".8221" stop-color="#FFF" stop-opacity="0"/></linearGradient><path opacity=".17" fill="url(#f)" d="M90.414 129.87c13.041 16.991 22.242 38.75 21.047 91.919l9.825.427c.345-10.73.594-67.31-30.872-92.346z"/></g><g><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="141.8833" y1="220.5439" x2="141.8833" y2="170.4628"><stop offset="0" stop-color="#5E7814"/><stop offset=".1416" stop-color="#758E1A"/><stop offset=".3448" stop-color="#8FA620"/><stop offset=".5533" stop-color="#A2B824"/><stop offset=".7683" stop-color="#ADC327"/><stop offset="1" stop-color="#B1C628"/></linearGradient><path fill="url(#g)" d="M138.662 222.528c.446 2.001-14.375 3.438-14.875 3s-10.75-68.875 37.438-62c-26.126 1.125-28.125 36.938-22.563 59z"/><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="129.5957" y1="224.3652" x2="129.5957" y2="167.5781"><stop offset="0" stop-color="#FFF"/><stop offset="1" stop-color="#FFF" stop-opacity="0"/></linearGradient><path opacity=".08" fill="url(#h)" d="M123.784 225.528c.286.25 5.257-.113 9.377-.845-.612-5.772-3.524-37.259 3.489-55.863-19.457 15.409-13.253 56.37-12.866 56.708z"/></g><g><image overflow="visible" opacity=".44" width="27" height="26" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAAACXBIWXMAAAsSAAALEgHS3X78AAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbtJREFUeNrslttugzAQRAGb0NBL evn/j0wTAgGMa0uz0mQFxKhV1YcijaA29cnsrteY7Jcv8w/ElSsVM+M/ApTF5a6Vb4XaBFdLgHj5 oIkkf8tcMpBBBrK4FwSMi7ugEXenYD4FyLA4XwbtSBbveAB60oA1XKpDDqMF4CFoH1TjeYf5CYAu qIU65WzS4DWHJQCPQc/QE8YMFrsGNUEnKkDOZ74GZHeGgBHyGvQWdIDTEmGLro5Yx6t8CvgGahfc GeUwgj6C3vEDBNjgOUN4r1BPxZUUUkM5rAE5wOULxqOTCgt2gFdUzbN70650FENVWsFtDccCjCG7 YK6E9Na5uYqETjPX2pa0udN40gQXI3Ii5V9SYchWkD3oVJUmdRqGDZSfT7w/IqSOxs8EHgnoUxxK uxLYmTa7Q84s3msBPOK9lpzedcj9T4AtVZyEcI8xrzb+CfM9hTapl7JDKQZpYw3cCpBb2wXPgwL6 eyHNKIeZatIl/keqW/KsG7jbejx5ddQI0FCIOd/6iEoumrmzjM88PoT1FpoUaLPDTDXfSTUD/eP8 2sG75SNqblF2lgT6zmfiasj+3HfplwADAHS2175OblUKAAAAAElFTkSuQmCC" transform="translate(105.1 176.966)"/><circle fill="#FFF" cx="118.745" cy="190.044" r="3.797"/><g><image overflow="visible" opacity=".44" width="26" height="26" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAACXBIWXMAAAsSAAALEgHS3X78AAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAadJREFUeNrsluduxCAQhA3BJc6l SXn/Z0znXDcgDdIEUXxRfkWxNDLmMN8Nuwtumv/rFy71gzH8LJn2xTBFdxU9M0AIJCWoKYCCNEkl YHukrEtVAPnJryBDbU0TbtBK7QCVmrMY1Dp1pBb9DSb0kJm0oE9SDk3GWQD1TtdOI+49+hUmnZzO Tp+RY0m5MxVXHnByunO6BbQjmIe8R255KRUDU8sYYB1gHvQIeeCAcTNALd7dsIwL2hr3aswMwU4A PTk9oE9h+Qa8t+DZYmmXo6kf0jzEbISje0BvMO4M6ASHPSUQl46UYpbKRk6UkcZZ/NZhrlQtfnNR Kur4T6jMmEOXKexzGwV9xnJZAliK0Yzs3EtbVhwzofQNBWsRk4FiFe4vTm8ogYkyUVLQFEzIUQB1 +H1CjEJieNAzxtjI4WFn7MpQen8QeKaifkWbYXstZoqWcaYEWsmVifosQMHZltv9SzFbaAsKRdvS H9gpeXgj3nK7fu6I0YkjxlDBcsauR48YVakzXTg8JXN4yiWHZ6podWa80JJWPwsu/eDJwQ598Pzd 60uAAQD7TbfBWRbFCQAAAABJRU5ErkJggg==" transform="translate(115.1 176.966)"/><circle fill="#FFF" cx="128.276" cy="190.044" r="3.797"/></g></g><g fill="#A0CB29"><path d="M91.724 212.716l5.375 9.25h3M106.724 225.966h6.5l-9.625-25.875M144.349 224.341h4.25l3.125-20M155.224 219.091h3.625l1.75-7.375"/></g></svg>

does contain an embedded image

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAAACXBIWXMAAAsSAAALEgHS3X78AAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbtJREFUeNrslttugzAQRAGb0NBL evn/j0wTAgGMa0uz0mQFxKhV1YcijaA29cnsrteY7Jcv8w/ElSsVM+M/ApTF5a6Vb4XaBFdLgHj5 oIkkf8tcMpBBBrK4FwSMi7ugEXenYD4FyLA4XwbtSBbveAB60oA1XKpDDqMF4CFoH1TjeYf5CYAu qIU65WzS4DWHJQCPQc/QE8YMFrsGNUEnKkDOZ74GZHeGgBHyGvQWdIDTEmGLro5Yx6t8CvgGahfc GeUwgj6C3vEDBNjgOUN4r1BPxZUUUkM5rAE5wOULxqOTCgt2gFdUzbN70650FENVWsFtDccCjCG7 YK6E9Na5uYqETjPX2pa0udN40gQXI3Ii5V9SYchWkD3oVJUmdRqGDZSfT7w/IqSOxs8EHgnoUxxK uxLYmTa7Q84s3msBPOK9lpzedcj9T4AtVZyEcI8xrzb+CfM9hTapl7JDKQZpYw3cCpBb2wXPgwL6 eyHNKIeZatIl/keqW/KsG7jbejx5ddQI0FCIOd/6iEoumrmzjM88PoT1FpoUaLPDTDXfSTUD/eP8 2sG75SNqblF2lgT6zmfiasj+3HfplwADAHS2175OblUKAAAAAElFTkSuQmCC

as well as a second one

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAACXBIWXMAAAsSAAALEgHS3X78AAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAadJREFUeNrsluduxCAQhA3BJc6l SXn/Z0znXDcgDdIEUXxRfkWxNDLmMN8Nuwtumv/rFy71gzH8LJn2xTBFdxU9M0AIJCWoKYCCNEkl YHukrEtVAPnJryBDbU0TbtBK7QCVmrMY1Dp1pBb9DSb0kJm0oE9SDk3GWQD1TtdOI+49+hUmnZzO Tp+RY0m5MxVXHnByunO6BbQjmIe8R255KRUDU8sYYB1gHvQIeeCAcTNALd7dsIwL2hr3aswMwU4A PTk9oE9h+Qa8t+DZYmmXo6kf0jzEbISje0BvMO4M6ASHPSUQl46UYpbKRk6UkcZZ/NZhrlQtfnNR Kur4T6jMmEOXKexzGwV9xnJZAliK0Yzs3EtbVhwzofQNBWsRk4FiFe4vTm8ogYkyUVLQFEzIUQB1 +H1CjEJieNAzxtjI4WFn7MpQen8QeKaifkWbYXstZoqWcaYEWsmVifosQMHZltv9SzFbaAsKRdvS H9gpeXgj3nK7fu6I0YkjxlDBcsauR48YVakzXTg8JXN4yiWHZ6podWa80JJWPwsu/eDJwQ598Pzd 60uAAQD7TbfBWRbFCQAAAABJRU5ErkJggg==

...get rid of those and we're on our way to a true SVG of half the logo. :-)

[gsouf]

Whoops, that's the eyes shadows, I forget to make them a shape. I will do that

[gsouf]

And here we are !

http://svgur.com/i/1ja.svg

Tell me if something is still wrong.

PS: sorry for posting a link but github does not support svg attachment :(

[robfrawley]

@gsouf That looks great; half the logo has a true vector representation of it.

[RishiKulshreshtha]

Just in case if anyone needs this, attaching a transparent PNG of TWIG Logo.

[DanielFlaum]

And here's a two tone version. The eyes have been cut out, so they'll take on the color of whatever is beneath the SVG.

http://svgur.com/i/Aze.svg

[TheMangoTrain]

Should be mentioned the aspect ratio is really impractical for any kind of logo, but also... this is a blade of grass, not a twig ? =)

[DanielFlaum]

It doesn't make sense to me either, but these guys are what show up next to "Twig" on the homepage.

I don't know what would be involved in a new logo being proposed and adopted.

[JudeHadidi]

https://svgshare.com/s/HTy