SVG Logos

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

SVG Logos

#1 Post by chromo23 » 10 May 2022, 14:17

Hi, today i was playing around with svg in html and for that i choose to use the logo of espeasy.
While i was doing it i was asking myself what the four stripes and the dot actually mean?

I am happy to share my work with you. (When you want so embed them e.g. in css there are svg to css converter online)
Bildschirmfoto 2022-05-10 um 13.40.02.png
Bildschirmfoto 2022-05-10 um 13.40.02.png (64.46 KiB) Viewed 4054 times
Here the code:

Code: Select all

--------color on dark:

<svg width="44" height="44">
 <rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:#3c3c3b" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
  <rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#25a843" />
  <rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#ffd103"/>
  <rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#f28d22" />
  <rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#e9493e"/>
  <circle cx="41" cy="25" r="5" fill="white" />
 </g>
</svg>

-------color  transparent w stroke

<svg width="44" height="44">
 <rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:none" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
  <rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#25a843" />
  <rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#ffd103"/>
  <rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#f28d22" />
  <rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#e9493e"/>
  <circle cx="41" cy="25" r="5" fill="white" stroke="black" stroke-width=".1"/>
 </g>
</svg>


---------blue on white:

<svg width="44" height="44">
 <rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:white" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
  <rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#07D" />
  <rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#07D"/>
  <rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#07D" />
  <rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#07D"/>
  <circle cx="41" cy="25" r="5" fill="#07D" />
 </g>
</svg>

--------white on blue:

<svg width="44" height="44">
 <rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:#07D" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
  <rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:white" />
  <rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:white"/>
  <rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:white" />
  <rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:white"/>
  <circle cx="41" cy="25" r="5" fill="white" />
 </g>
</svg>

---------blue on transparent:

<svg width="44" height="44">
 <rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:none" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
  <rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#07D" />
  <rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#07D"/>
  <rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#07D" />
  <rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#07D"/>
  <circle cx="41" cy="25" r="5" fill="#07D" />
 </g>
</svg>

--------white on transparent:

<svg width="44" height="44">
 <rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:none" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
  <rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:white" />
  <rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:white"/>
  <rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:white" />
  <rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:white"/>
  <circle cx="41" cy="25" r="5" fill="white" />
 </g>
</svg>

--------white on transparent (darkmode):

<svg width="44" height="44">
 <rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:none" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
  <rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#dfdfdf" />
  <rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#dfdfdf"/>
  <rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#dfdfdf" />
  <rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#dfdfdf"/>
  <circle cx="41" cy="25" r="5" fill="#dfdfdf" />
 </g>
</svg>
I also did a logo with text because i wanted something nice to put as a sticker on devices:
Bildschirmfoto 2022-05-10 um 13.50.29.png
Bildschirmfoto 2022-05-10 um 13.50.29.png (147.76 KiB) Viewed 4054 times

And than i got sentimental and carried away because of the colors :roll:
So here the retro stuff:
Bildschirmfoto 2022-05-10 um 13.52.35.png
Bildschirmfoto 2022-05-10 um 13.52.35.png (104.19 KiB) Viewed 4054 times

User avatar
Ath
Normal user
Posts: 3418
Joined: 10 Jun 2018, 12:06
Location: NL

Re: SVG Logos

#2 Post by Ath » 10 May 2022, 14:27

Looking great :D

Though I do like the colored versions very much, I think the blue/white/transparent combinations are more usable in a professional environment.

And the ones with the 'inside' pay-off would be very nice in blue as well.

You could start a service for offering these for sale (to ESPEasy users), but also talk to TD-er about copyright and sponsoring :lol: :shock:
/Ton (PayPal.me)

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: SVG Logos

#3 Post by chromo23 » 10 May 2022, 14:37

Ath wrote: 10 May 2022, 14:27 You could start a service for offering these for sale (to ESPEasy users), but also talk to TD-er about copyright and sponsoring
you mean like t-shirts, hats and sticker :lol:
Ath wrote: 10 May 2022, 14:27 And the ones with the 'inside' pay-off would be very nice in blue as well.
you mean like this so that we have all the commodore colors:
Bildschirmfoto 2022-05-10 um 14.35.18.png
Bildschirmfoto 2022-05-10 um 14.35.18.png (52.79 KiB) Viewed 4044 times

User avatar
Ath
Normal user
Posts: 3418
Joined: 10 Jun 2018, 12:06
Location: NL

Re: SVG Logos

#4 Post by Ath » 10 May 2022, 14:43

While that is also looking nice, we would then have to update any other ESPEasy logo's to have these colors as well. I was more thinking of having the white stripes (different lengths, like before) instead of the colored.
/Ton (PayPal.me)

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: SVG Logos

#5 Post by chromo23 » 10 May 2022, 14:56

the 'inside' makes only sense in a big circle and that doesn´t look so good with the "original" stripes in terms of proportions.. but i ´ll think about it....

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: SVG Logos

#6 Post by TD-er » 10 May 2022, 16:55

The original logos are in SVG too, so I can provide them for you if you like.

Jimmy (GrovKillen) made the logo.
To be honest, I kinda forgot about the "meaning" of the stripes and the dot.

Where do you like to use the logos?
Not that I'm against using the logos, absolutely not, but I guess there has to be some "official" way of approving the use of them or else we will loose the "rights" to put restrains on using the logo for others.
For example, what if someone tries to make (and sell) the worst and most dangerous designed device ever and puts the ESPEasy logo on it. In those situations I would like to tell them to stop using the logo as it is our "brand" or "trademark" or whatever it is legally called.

So maybe we can have a talk about it via a private message and/or a personal call?

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: SVG Logos

#7 Post by chromo23 » 10 May 2022, 17:06

Oh, i didn´t know svg files already exist...(anyway..i learned something. it was worth it)
And no worries, the only thing i thought of, was to put maybe one of the small logos in the custom css file of me if this is ok.
Other than that you can use the logos if you like (the ones with the lettering).. I made them for the project.
The "retro" logos where actually meant only for me and since i am not doing any commercial projects with esp easy there will be no harm done.
i am just a fan :)

.... maybe i also make myself a t-shirt :D

User avatar
Ath
Normal user
Posts: 3418
Joined: 10 Jun 2018, 12:06
Location: NL

Re: SVG Logos

#8 Post by Ath » 10 May 2022, 17:08

chromo23 wrote: 10 May 2022, 17:06 .... maybe i also make myself a t-shirt :D
In that case: I want (at least) one :lol:
(Size: XL)
/Ton (PayPal.me)

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: SVG Logos

#9 Post by TD-er » 10 May 2022, 17:51

chromo23 wrote: 10 May 2022, 17:06 Oh, i didn´t know svg files already exist...(anyway..i learned something. it was worth it)
And no worries, the only thing i thought of, was to put maybe one of the small logos in the custom css file of me if this is ok.
Other than that you can use the logos if you like (the ones with the lettering).. I made them for the project.
The "retro" logos where actually meant only for me and since i am not doing any commercial projects with esp easy there will be no harm done.
i am just a fan :)

.... maybe i also make myself a t-shirt :D
To use the logos in ESPEasy templates or ESPEasy CSS, there is absolutely no harm for such use cases.
So feel free to use them :)

Post Reply

Who is online

Users browsing this forum: No registered users and 18 guests