Come faccio a visualizzare immagine SVG in Rails?

Ho un immagine svg on /app/asssets/immagini/simboli.svg con questo contenuto.

<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-search" viewBox="0 0 18 18"><path fill="currentColor" d="M12.8 11.4c.9-1.2 1.4-2.7 1.4-4.3C14.2 3.2 11 0 7.1 0S0 3.2 0 7.1c0 3.9 3.2 7.1 7.1 7.1 1.6 0 3.1-.5 4.3-1.4l5.2 5.2 1.4-1.4-5.2-5.2zM2 7.1C2 4.3 4.3 2 7.1 2s5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1S2 9.9 2 7.1z"/></symbol><symbol id="icon-view-default" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8 11H0V0h8v11zM18 5h-8V0h8v5zM8 18H0v-5h8v5zM18 18h-8V7h8v11z"/></g></symbol><symbol id="icon-view-alt" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8 8H0V0h8v8zM18 8h-8V0h8v8zM8 18H0v-8h8v8zM18 18h-8v-8h8v8z"/></g></symbol><symbol id="icon-view-full" viewBox="0 0 18 18"><g fill="currentColor"><path d="M18 8H0V0h18v8zM18 18H0v-8h18v8z"/></g></symbol><symbol id="icon-facebook" viewBox="0 0 9 19"><path fill="currentColor" d="M6.7 3.6H9V0H6.3c-3.3.1-4 2.1-4 4.1V6H0v3.5h2.2V19h3.4V9.5h2.8L8.9 6H5.6V4.9c0-.7.4-1.3 1.1-1.3z"/></symbol><symbol id="icon-twitter" viewBox="0 0 17.9 15"><path fill="currentColor" d="M17.9 1.8c-.3.2-1.2.5-2 .6.5-.3 1.3-1.3 1.5-2.1-.5.3-1.7.8-2.3.8C14.4.5 13.5 0 12.4 0c-2 0-3.7 1.7-3.7 3.8 0 .3 0 .6.1.8-2.8-.1-6-1.5-7.8-4-1.1 2-.2 4.2 1.1 5-.4 0-1.2-.1-1.6-.4 0 1.3.6 3.1 2.9 3.7-.5.4-1.3.3-1.6.3.1 1.1 1.6 2.6 3.3 2.6-.6.7-2.6 2-5.1 1.6 1.7 1 3.7 1.6 5.8 1.6 6 0 10.6-5 10.3-11.1v-.1c.6-.4 1.3-1.1 1.8-2z"/></symbol><symbol id="icon-pinterest" viewBox="0 0 18 18"><path fill="currentColor" d="M2.3 0h13.4C17 0 18 .9 18 2.3v13.4c0 1.4-1 2.3-2.3 2.3H2.3C1 18 0 17.1 0 15.7V2.3C0 .9 1 0 2.3 0zm10.8 2c-.4 0-.8.4-.8.8v1.9c0 .4.4.8.8.8h2c.4 0 .8-.4.8-.8V2.8c.1-.4-.3-.8-.8-.8h-2zM16 7.6h-1.6c.2.5.2 1 .2 1.5 0 3-2.5 5.4-5.6 5.4-3.1 0-5.6-2.4-5.6-5.4 0-.5.1-1.1.2-1.5H2v7.6c0 .4.3.7.7.7h12.5c.4 0 .7-.3.7-.7l.1-7.6zM9 5.5C7 5.5 5.4 7 5.4 9c0 1.9 1.6 3.5 3.6 3.5s3.6-1.6 3.6-3.5c0-2-1.6-3.5-3.6-3.5z"/></symbol><symbol id="icon-tumblr" viewBox="0 0 11 19"><path fill="currentColor" d="M8.6 15.9c-1.6 0-2.3-1.3-2.3-2.2V7.8h4.1v-3h-4V.1S4.7 0 3.5 0C3.5 4.1 0 4.9 0 4.9v2.8h2.3v7C2.3 17.1 4.4 19 7 19s4-1.1 4-1.1v-3.1c0 .1-.8 1.1-2.4 1.1z"/></symbol><symbol id="icon-menu" viewBox="0 0 274.5 224.5"><g fill="currentColor"><path d="M274 53.8H.5V.5H274v53.3zM274 138.9H.5V85.6H274v53.3zM274 224H.5v-53.3H274V224z"/></g></symbol><symbol id="bar" viewBox="0 0 274.5 54.3"><path fill="currentColor" d="M274 53.8H.5V.5H274v53.3z"/></symbol><symbol id="arrow" viewBox="0 0 38 14"><path fill="currentColor" d="M31 0l-1.4 1.4L34.2 6H0v2h34.2l-4.6 4.6L31 14l7-7-7-7z"/></symbol><symbol id="refresh" viewBox="0 0 19 16"><path fill="currentColor" d="M9.4 6.2l5.9 4.4L19 4.4l-1.7-1L15.7 6c-.9-3.5-4-6-7.7-6-4.4 0-8 3.6-8 8s3.6 8 8 8c2.1 0 4.1-.8 5.6-2.3l-1.4-1.4C11.1 13.3 9.6 14 8 14c-3.3 0-6-2.7-6-6s2.7-6 6-6c3 0 5.4 2.2 5.9 5l-3.3-2.4-1.2 1.6z"/></symbol></svg>

Ora su un modello html che ho trovato in rete le immagini vengono visualizzate con :

  <svg>
      <use xlink:href="assets/img/symbols.svg#bar"></use>
    </svg>

Come posso fare questo lavoro su rotaie.

Ho provato :

 <use xlink:href="images/symbols.svg#bar"></use>

e svg-inline gemma

ma su entrambi non vedo le immagini sulla mia pagina.

Qualcuno mi può aiutare a capire come fare questo lavoro ?

InformationsquelleAutor Roelof Wobben | 2016-05-02



6 Replies
  1. 18

    Visualizzazione Svg (scalable vector graphics) in una applicazione Rails

    Specifica il tipo di file SVG in attività di compilazione

    production.rb 
    
      config.assets.precompile += %w( '.svg' )  
    
      # Must include to get inline SVGs to work in deploy
      config.assets.css_compressor = :sass

    Creare un helper per visualizzare i file di

    myhelper.rb
    
    def show_svg(path)
      File.open("app/assets/images/#{path}", "rb") do |file|
        raw file.read
      end
    end

    Richiamare i file di elaborazione helper, a vostro parere,

    <%= show_svg('symbols.svg') %>

    Dalla tua domanda non mi è chiaro al 100% sulla tua realizzazione, ma questi passaggi, si dovrebbe arrivare al punto in cui la vostra immagine SVG è visibile. Una volta che hai i file visibili, è possibile applicare i CSS.

    • Hai provato questo?
    • Bella soluzione, ma hai dimenticato di aggiungere citazioni: <%= show_svg('symbols.svg') %> funziona bene 🙂
    • che cosa succede se si dispone di un file svg sprite di icone? e in ambiente di sviluppo?
    • Vi suggerisco questo post come una nuova domanda. Io non sto facendo RoR molto in questi giorni.
    • questo non sembra funzionare con SVGs caricati utilizzando active storage
    • Qualcuno modificato la risposta; verificare con loro se si è rotto :(.

  2. 3

    È possibile visualizzare SVGs nello stesso modo come le immagini.

    Per esempio in haml:

    %img{:src => "/images/image1.svg"}

    speranza che aiuta!

    • Vi ringrazio molto!
  3. 0

    Semplice:

    Prima, aggiungere il formato svg per il bene precompilare elenco di attività.rb

    application.config.assets.precompile +=
        %w(<your other files> symbol-defs.svg)

    Quindi riferimento ad esso nel tuo erb/haml file, come illustrato di seguito:

    <svg class="icon gr-menu">
      <use xlink:href="<%= asset_path('symbol-defs') %>#gr-menu"></use>
    </svg>
  4. 0

    Creare un helper: (contenuto è diverso in ogni caso, personalizzate il vostro proprio uno)

    def icon(icon, css_class: "")
      content_tag(:svg, class: "icon icon_#{icon} #{css_class}") do
          content_tag(:use, nil, 'xlink:href' => "#icon_#{icon}")
      end
    end

    Usarlo come questo:

    <%= icon 'arrow-menu' , css_class: 'arrow-breadcrumb' %>
  5. -1

    Io davvero non so come analizzare il file SVG; ma questa stessa cosa si può utilizzare per il file SVG. È quindi possibile utilizzare il asset_path helper nel file SVG; ma la cattura è, per impostazione predefinita guide di analizzare CSS, JS e ERB. In che modo il link all’interno del formato SVG possono lavorare con la asset pipeline. Forse, se si tenta di cambiare il nome da “simboli”.svg’ di ‘simboli.svg.erb’ analizza il file per ottenere l’url corretto.

    Il problema è che l’asset pipeline non è di essere utilizzato in accordo alle rotaie.

    e questo è come si può analizzare (elabora) i file in formato svg:

    Il selettore predefinito per la compilazione dei file include application.js,
    applicazione.css e tutti i non-JS/CSS file (tra tutte le immagini
    attività automaticamente) dall’app/attività di cartelle tra cui gemme: [
    Proc.new { |nome di file, il percorso| path =~ /app/attività/&& !%w(.js
    .css).includere?(File.extname(filename)) }, /applicazione.(css|js)$/]

    Ulteriori informazioni sugli helper metodi

    2.3.2 CSS e Sass

    Quando si utilizza l’asset pipeline, percorsi per le risorse devono essere ri-scritto e
    sass-guide fornisce l’url e il percorso di aiutanti (sdoppiato in Sass,
    ha sottolineato in Ruby) per le seguenti classi di attività: immagine, font,
    video, audio, JavaScript ed i fogli di stile.

    image-url("rails.png") becomes url(/assets/rails.png)
    image-path("rails.png") becomes "/assets/rails.png".

    Più generico modulo può anche essere utilizzato:

    asset-url("rails.png") becomes url(/assets/rails.png)
    asset-path("rails.png") becomes "/assets/rails.png"

    2.3.3 JavaScript/CoffeeScript e ERB

    Se si aggiunge un erb estensione a JavaScript in un asset, che lo rende qualcosa di
    come applicazione.js.erb, è quindi possibile utilizzare il asset_path helper in
    il codice JavaScript: $(‘#logo’).attr({ src: “<%=
    asset_path(‘logo.png’) %>” });

    Questo scrive il percorso per la particolare attività a cui si fa riferimento.

    Allo stesso modo, è possibile utilizzare il asset_path helper in CoffeeScript file
    con erb estensione (ad esempio, l’applicazione.js.caffè.erb): $(‘#logo’).attr
    src: “<%= asset_path(‘logo.png’) %>”

    Si può controllare:
    http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

    • Grazie, ho provato quello che hai detto : <usare xlink:href= <%= asset_url(“immagini/simboli.svg.erb#bar”) %>></usa> ma ancora nessuna icona. A me sembra che le rotaie non può gestire il #bar
    • base del codice deve essere utilizzato il ‘asset-percorso’
    • non fa alcuna differenza. Quello che ho detto prima. E ‘ a me sembra che il #bar non può essere gestito

Lascia un commento