🥇 Incorporando e estilizando documentos SVG embutidos com CSS no Rails

Atualizaçã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 com CSS para uso na web é obtido de forma mais confiável adicionando classes ao documento e incorporando -o embutido no HTML.

Para incorporar e estilizar documentos SVG no Rails, eu uso este auxiliar simples:

def embedded_svg filename, options={}
   file = File.read(Rails.root.join('app', 'assets', 'images', filename))
   doc = Nokogiri::HTML::DocumentFragment.parse file
   svg = doc.at_css 'svg'
   if options[:class].present?
     svg['class'] = options[:class]
   end
   doc.to_html.html_safe
 end

Coloque um documento SVG (sem quaisquer atributos de classe CSS) no app/assets/images/diretório e embedded_svgauxiliar de um modelo de visualização (exemplo de HAML):

!!! 5 
 %html
   %head
     %title Embedded SVG Documents
   %body
     %h1 Embedded SVG Documents
     %div
       = embedded_svg "some-document.svg", class: 'some-class'

Adicione estilos CSS para direcionar a classe adicionada ao SVG. Por exemplo, isso pode ser aplicável para colorir e dimensionar um ícone SVG :

.some-class {
  display: block;
  margin: 0 auto;
  fill: #3498db;
  width: 5em;
  height: 5em;
}

O código de exemplo se aplica igualmente bem a aplicativos da web Ruby não-Rails; simplesmente modifique o caminho do arquivo ou diretório para atender às suas necessidades.

Related Posts