Conteúdo para você se capacitar em programação
Isso pode ser evitado colocando a fonte .svg logo após .eot (para não bagunçarmos no IE). Bem assim: @font-face { font-family: ‘MyFont’; src: url(‘../fonts/myfont.eot’); src: url(‘../fonts/myfont.eot?#iefix’) format(’embedded-opentype’), url(‘../fonts/myfont.svg#thesansplain’) format(‘svg’), url(‘../fonts/myfont.woff’) …
Continuar lendoEstava tentando dimensionar e girar um arquivo SVG importado usando o SnapJS. Não foi possível fazê-lo funcionar, então investiguei um pouco e descobri que o elemento SVG não pode aceitar …
Continuar lendoTodos nós conhecemos as vantagens dos gráficos vetoriais escaláveis. Os gráficos são definidos no formato xml, o que causa um tamanho de arquivo menor, enquanto a imagem pode ser redimensionada …
Continuar lendocircle { shape-rendering: crispEdges; } circle { shape-rendering: auto; } a renderização de formas define a prioridade de como seus SVGs devem ser renderizados. Você pode especificar auto, optimizeSpeed, crispEdges …
Continuar lendoUm tempo atrás, recriei o logotipo de Breaking Bad com apenas alguns CSS, HTML (canvas), SVG e JavaScript: Versão ao vivo e código-fonte http://codepen.io/TimPietrusky/pen/Bsegb Confecção do logotipo Escrevi um artigo …
Continuar lendoAtualização: publiquei uma gema baseada nesta técnica, chamada inline_svg , que você pode usar em suas visualizações Rails para incorporar e estilizar documentos SVG. O estilo de um documento SVG …
Continuar lendoEntão você criou uma imagem vetorial adorável no Illustrator, mas seu desenvolvedor da web (provavelmente mal-humorado e propenso a protestos) a pediu no formato SVG . E agora? Você poderia …
Continuar lendoNa minha empresa, adoramos trabalhar com svg, mas ele não é compatível com navegadores antigos como o IE8 e inferiores ( fonte ). Então, aqui está um bom substituto usando …
Continuar lendoSe você encontrar isso no console do Chrome: Uncaught TypeError: Cannot read property ‘nodeName’ of undefined então você está sofrendo de: https://github.com/angular/angular.js/issues/8118 minha solução rápida: svg { pointer-events: none;} Obviamente, …
Continuar lendoSe o que background-sizevocê deseja usar em um SVG background-imagenão respeita sua proporção, é necessário definir o parâmetro preserveAspectRatiocomo noneno elemento raiz SVG. <svg >=”http://www.w3.org/2000/svg” width=”96″ height=”96″ viewBox=”0 0 96 …
Continuar lendoAlgum tempo atrás, eu escrevi sobre como incorporar e estilizar documentos SVG no Rails . Esse modesto fragmento de Ruby desde então se tornou um ajudante gem completo do Rails …
Continuar lendoUse o tamanho da propriedade “em” para dimensionar o SVG em relação aos outros elementos. Quando se usa uma tela de retina, os elementos serão duas vezes maiores, o que …
Continuar lendoTodos os navegadores que oferecem suporte a imagens de fundo SVG também oferecem suporte a várias imagens de fundo. CSS .module { background: url(‘logo.png’); background: none, url(‘logo.svg’);} SASS $public_path: ./;@mixin …
Continuar lendose você tiver um SVG com texto que deseja converter em PDF para compartilhar com outras pessoas, o inkscape é seu amigo. você pode usar a GUI para dar dicas …
Continuar lendoDavid Bushell e Chris Coyier escreveram em um blog sobre este pequeno truque para carregar um substituto de bitmap para um SVG carregado por meio de uma <img>tag: <img src=”image.svg” …
Continuar lendoEu precisava usar um conjunto de ícones ( Entypo ) que era fornecido apenas como arquivos SVG e precisava ter vários tamanhos e cores disponíveis. Então eu escrevi um script …
Continuar lendo