Com o uso de Conteúdos SVG, é possível criar páginas totalmente personalizadas em seus modelos de propostas, desde folhas de rosto até catálogos de produtos. Gráficos Vetoriais Escaláveis (SVGs) são dimensionáveis, permitindo que sejam redimensionados sem perda de qualidade, garantindo uma experiência visual consistente em diferentes dispositivos e tamanhos de tela.
Adicionando conteúdos SVG a modelos de propostas
Para configurar e personalizar os modelos de propostas comerciais instalados em sua conta WBudget, acesse a opção Cadastro > Modelos de Propostas no menu principal.
Para editar um modelo salvo, clique em editar na coluna ações. Para trabalhar com segurança, é possível, antes de realizar as alterações, duplicar um modelo para edição. Basta clicar na seta na mesma coluna e selecionar duplicar.
Na tela de configuração do modelo a ser editado, clique em Nova Parte para adicionar um novo bloco de conteúdo para o modelo. Logo em seguida, na janela de seleção, procure pela opção Conteúdo SVG
Na tela de edição de Conteúdo SVG você tem disponível um campo para inclusão seu código em formato SVG para renderização da imagem a ser exibida na página.
Observação importante: utilize códigos para imagens de tamanho proporcional a 595 x 842 pixels (layouts em retrato), 842 x 595 pixels (layouts em paisagem) ou 595 x 421 pixels (layouts em meia página).
Exportando um código SVG para utilização no WBudget
Programas para a criação de ilustrações vetoriais como Adobe Illustrator, CorelDRAW, dentre outros, possuem, em sua maioria, a opção formato de saída SVG. Ao exportar uma ilustração de uma página, por exemplo, é possível extrair um código SVG para ser utilizado como uma página personalizada no WBudget.
No exemplo abaixo, utilizando a ferramenta Adobe Illustrator, geramos uma página em formato A4, para ser utilizada em um modelo proposta em layout paisagem.
Copie o código gerado pela sua ferramenta de ilustração vetorial e cole na tela de configuração de Conteúdo SVG. Para pequenos ajustes nas bordas da página, altere ligeiramente os valores do atributo viewBox (conforme a imagem de exemplo abaixo).
Caso haja alguma incompatibilidade, o sistema exibirá um alerta. Para boas práticas de criação de arquivos SVG, sugerimos a leitura de SVG: Gráficos Vetoriais Escaláveis | MDN (mozilla.org)
Código utilizado neste exemplo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 841.89"><rect width="600" height="841.89" style="fill:#151e66"/><rect x="109.16" y="120.05" width="380.29" height="659.04" style="fill:#fff;opacity:0.36"/><rect x="99.16" y="109.05" width="380.29" height="659.04" style="fill:#e9819e"/><ellipse cx="308.79" cy="470.49" rx="114" ry="110.88" style="fill:#ed99b5"/><text transform="translate(147.28 258.38) scale(1.03 1)" style="font-size:12.635869979858398px;fill:#fff;font-family:Montserrat-Regular, Montserrat Regular;letter-spacing:0.2999733099021925em">S<tspan x="10.02" y="0" style="letter-spacing:0.2659956288908428em">U</tspan><tspan x="21.56" y="0">A </tspan><tspan x="39.55" y="0" style="letter-spacing:0.2900130383667857em">M</tspan><tspan x="53.37" y="0">A</tspan><tspan x="64.9" y="0" style="letter-spacing:0.30298018432797563em">R</tspan><tspan x="75.52" y="0" style="letter-spacing:0.30399500444667743em">C</tspan><tspan x="86.69" y="0">A</tspan></text><rect x="147.38" y="379.22" width="125.35" height="27.84" style="fill:#3a4495"/><text transform="translate(145.75 305.46) scale(1.03 1)" style="font-size:66.37188720703125px;fill:#fff;font-family:PlayfairDisplay-Black, PlayfairDisplay Black;font-weight:800">seu<tspan x="0" y="48.11">p</tspan><tspan x="37.76" y="48.11" style="letter-spacing:-0.009996378515180957em">r</tspan><tspan x="58.8" y="48.11">odu</tspan><tspan x="169.25" y="48.11" style="letter-spacing:-0.005996395988347632em">t</tspan><tspan x="190.82" y="48.11">o</tspan></text><polygon points="306 632.74 273.48 632.74 306.41 464.39 338.92 464.39 306 632.74" style="fill:#3a4495"/><polygon points="367.29 632.74 334.77 632.74 367.69 464.39 400.21 464.39 367.29 632.74" style="fill:#3a4495"/><polygon points="428.57 632.74 396.06 632.74 428.98 464.39 461.5 464.39 428.57 632.74" style="fill:#3a4495"/><polygon points="223.26 704.19 108.35 704.19 108.35 592.42 223.26 704.19" style="fill:#3a4495"/><line x1="153.95" y1="576.08" x2="268.86" y2="687.85" style="fill:none;stroke:#fff;stroke-miterlimit:10"/><line x1="153.95" y1="687.85" x2="153.95" y2="576.08" style="fill:none;stroke:#fff;stroke-miterlimit:10"/><line x1="268.86" y1="687.85" x2="153.95" y2="687.85" style="fill:none;stroke:#fff;stroke-miterlimit:10"/><text transform="translate(180.04 398.87)" style="font-size:16px;fill:#fff;font-family:MyriadPro-Regular, Myriad Pro">SEU <tspan x="29.5" y="0" style="letter-spacing:0.027984619140625em">C</tspan><tspan x="39.23" y="0" style="letter-spacing:-0.074981689453125em">T</tspan><tspan x="45.98" y="0">A</tspan></text></svg>