SVG ou png?

[silvaMatheus]

Boa noite pessoal achei um desafio em um repositório aonde pede :

Aplicação que simula um elevador em JavaScript

utilizando : HTML CSS JavaScript

O Elevador possui 5 andares.
Com botões de chamadas para subir e descer em cada andar.
Abertura das portas e fechamento das portas quando chega ao andar.
voce pode escolher o andar para no painel do elevador.
O elevador tem o tempo de viagem proporcional ao ponto de origem em que ele estava.
Caso alguem chame num andar mais abaixo do que outra chamada acima, ele atende a chamada do andar mais inferior.
Layout responsivo até Iphone 5s.

Ainda estou pensando como irei fazer ja q nao manjo ja q voltei a pegar pesado aos estudos agora mas me auto desafiei a tentar ... Minha duvida é a seguinte, na questão do layout seria melhor eu pegar uma imagem em png como essa e fazer um painel separado com css :

ou fazer todo o layout em SVG?

obs: Não sei se ficou clara minha ideia desculpem kkkk

[n3pu]

Pelo meu entendimento sobre qualidade, vc deveria trabalhar com canvas. Se optar por svg seria pela facilidade e qualidade do resultado. Como tem uma condição diferente de tempo pra cada ocasião então vai ter q trabalhar com canvas. Imagino isso =)

[brunoravanhani]

Cara, se puder (e tiver tempo) use SVG, vai te dar mais liberdade e é mais leve. Seria a minha opção no caso.

[deppbrazil]

SVG fica mais leve pois é tudo codigo, porém vc teria que vetorizar tudo no Ai (illustrator) ou algum software similar e exportar em SVG, mas o Ai gera um SVG com um codigo muito sujo no qual vc perde um pouco de performance principalmente se vc usar os efeitos de 3D e rotação nativos do CSS vai notar que o SVG vai renderizar meio embaçado no browser (pelo menos tive um problema parecido) e fazer o SVG na mão vai te levar tempo....

Não sei se alguém usa outra técnica na produção de SVG´s! se tiver pinga ai =)

Como é um teste que pede HTML, CSS e JavaScript creio que eles estão avaliando a funcionalidade e não tanto se vc usar PNG ou SVG... pq ate mesmo se vc usar os PNG otimizados para Web (medias em px, e 70 a 100dpi na qualidade) a performance tb fica ótima e te economiza um tempo do c@6%¨8($##... rsrs

Regards! =)

[kivervinicius]

Desenha tudo com alguma ferramenta vetorial (recomendo Inkscape) e gera arquivos separados e passa o SVGO para limpar todas tags. Com isso você pode ter mais liberdade na hora de fazer a página.

[silvaMatheus]

vlw pessoal pelo visto SVG é uma das melhores opções, ja vetorizei um desenho q eu fiz
agora irei estudar como trabalhar as animações muito obg mesmo

[bernardodiasc]

Show @silvaMatheus 👍

[ranosi]

Tu tem como disponibilizar esse desafio pra galera também? Em ter, 31 de out de 2017 às 23:31, Bernardo Dias <[email protected]> escreveu:

…

Show @silvaMatheus <https://github.com/silvamatheus> 👍 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/frontendbr/forum/issues/791#issuecomment-340953085>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AV1hh3aDrxo93A3PNbk91PsmVALRM7I7ks5sx8nwgaJpZM4QMJgs> .