Svg responsive 
Autore: Ettore P.
Visite 1874,
Followers 2,
Condiviso 0
Buon pomeriggio, se inserisco un'immagine svg in un oggetto html (oppure in un oggetto testo abilitato html), cosa devo aggiungere per poter definire meglio le dimensioni e per rendere tale immagine responsive?
Postato il
non risolvi con il classico width:100%?
fai qualche test con questo codice customizzandolo e vedi se risolvi:
<div class="container">
<iframe src="file.svg">
</iframe>
</div>
-----css-----
.container {
width: 50%;
height: 0;
padding-top: 48%;
position: relative;
}
In un oggetto HTML la inserisci normalmente utilizzando <img src="percorso immagine .svg" width="100%"height="misura in px">
Per renderla adattabile basta inserire la larghezza in percentuale.
@Giancarlo B. non avevo visto la tua risposta !!!
Autore
Effettivamente basta la larghezza in percentuale.
Grazie mille.
Ma voi cosa ne pensate dell'utilizzo di immagini e scritte in formato svg?
Sto cercando di integrarne più che posso in modo da avere una definizione ottima a qualsiasi risoluzione.
Avete altre idee o consigli?
al momento io non le utilizzo, in futuro si vedrà
...!... a seconda del tipo ed uso di immagine SVG, non credere che in alcuni casi sia veramente un vantaggio...!...
... no! responsive, ma elastico; ...oltre quanto è stato già anticipato, ... hai provato ad usare direttamente come immagine, cercando come file nella relativa cartella: "*.svg"...?...
... se SVG non contiene contenuto attivo puoi anche usare TAG <IMG> come una normale immagine e se con il solo attributo WIDTH="100%" (o percentuale preferita) sarà elastico razionale relativo alla larghezza...
... lo stesso se usi il TAG <IMG> con il solo attributo HEIGTH="100%" (o percentuale preferita) sarà elastico razionale relativo all'altezza...
... ovviamente puoi usare valori esatti razionali...
... per effetto deformato (ironed/stretched) relativo, puoi usare ambedue i valori al 100%...
... per entrare nel concreto si dovrebbe vedere cos'è che hai fatto online...
.
Autore
Non vedo alcuna cartella .svg ... dovevo crearla io? Le immagini .svg le ho importate nella cartella "files" del programma.
Dal file manager vedo le immagini svg presenti nella cartella "files" attivando la visualizzazione dei files nascosti.
Quando però cerco di importare l'immagine in una cella "immagine" del programma (o cella "testo") non ho la possibilità perchè le .svg non vengono mostrate.
Sbaglio qualcosa o è una limitazione del programma?
... è la cartella ove si trovano le immagini SVG che vuoi usare...
... come avevo detto; [ ... ... cercando come file nella relativa cartella: "*.svg" ... ... ]
.
Autore
Scusa Kola, non avevo dato importanza all'asterisco (*.svg") In linux, i files e le cartelle nascoste vengono preceduti da un punto, avevo notato il punto di estensione invece dell'asterisco
Quindi l'unico modo per importarle è usare il tag "IMG" o altro codice?
... per SVG senza contenuto attivo, ...come detto prima, *.svg, oppure con <IMG> ...niente di particolare...
Autore
Nessun contenuto attivo, al massimo un link di collegamento....
... a seconda dei due metodi e di dove lo usi, puoi applicare il collegamento o con il programma o con il basico tag <A> ...
.
Autore
Autore
Kola, per "contenuto attivo" si intende anche il link di collegamento, giusto?
Se devo inserire solo l'immagine, uso:
<img src="files/logo-ettore-star-200.svg">
Se aggiungo anche un link:
<a href="https://paypal.me/pools/c/8kfoNyBD1Q"><img src="files/paypal-logo-256.svg"</a>
Autore
Dimenticavo, aggiungendo il tag "width=100%" l'immagine si adatta alla larghezza disponibile MA a me interessava che, ipotizzando di avere una immagine larga 200px, questa immagine diventasse responsive proporzionalmente.
Col tag "width 100%" mi trovo invece l'immagine gigantesca se visualizzata su desktop.... perchè ovviamente occupa tutta la larghezza.
Dovrebbe invece restare 200px, per ridursi in proporzione a cominciare, ad esempio, da risoluzioni inferiori.
Autore
... e se inserisco un valore di width del 50%, quando l'immagine viene visualizzata su smartphone risulta piccolina.
Prova con @mediascreem nel css individuando la cella dell'immagine.Ora devo chiudere, se non riesci ti posto un esempio in serata
esempio.. 479px intervento a risoluzione
@media (max-width: 479px) {
codice con la nuova percentuale
}
</style>
Autore
In questo caso, l'immagine si trova dentro una cella testo insieme ad altri elementi.
Di seguito il riferimento esatto all'interno del file index.css
#imTextObject_98_tab0 img { border: none; margin: 0; vertical-align: text-bottom;}
e il codice usato nella cella:
<a href="https://paypal.me/pools/c/8kfoNyBD1Q"><img src="files/paypal-logo-256.svg"/></a>
Autore
La visualizzazione simulata su galaxy fold mostra le due immagini svg incomplete (logo ettore e paypal)
Ettore, ma perchè vuoi usare i file svg?
credo che con i classici png e jpg sarebbe tutto più semplice, visto che vengono ridimensionati dal programma.
... assegna un ID al tag IMG ed usa il media-query per controllare la larghezza sotto alla definizione desiderata...
...per esempio: <img ID="pp" src="files/paypal-logo-256.svg"/>
... ed in /HEAD:
<style>@media (max-width: 479px) {#pp {width:300px;}}</style>
.
Autore
Ciao Giancarlo, sicuramente!
Per i pochi loghi e titoli principali che uso preferisco avere una definizione ottima e con files di minor peso.
Si tratta di una questione mia personale... mi complico la vita come se dovessi vincere il premio per la migliore grafica nonostante il mio sito venga visualizzato da una manciata di utenti
... lo so, è una mia fissa...
Mi piace poter ingrandire le immagini da smartphone e vedere che non degradano. La cosa che non mi piace è appunto vedere il testo non degradare mentre le scritte png (o jpg) sì.
Le scritte png devo crearle perchè uso alcuni fonts di cui esiste solo il formato tft.
Altra cosa, per visualizzare il nome e cognome su un'unica riga (quello grande in bianco di inizio sito) ho dovuto creare due immagini abbastanza larghe: Il nome e i cognome.
A quel punto ho messo in una cella di testo (potevo anche usare due celle immagine separate ed affiancate) le due immagini "nome" e "cognome", una di fianco all'altra in modo da avere tutto in una riga su desktop e su due righe (nome sopra e cognome sotto) nelle risoluzioni inferiori.
Se avessi creato un'unica png con nome e cognome sarebbe diventata molto piccola su smartphone, su una riga sola.
Se avessi avuto la possibilità di usare un font google o un web font avrei forse avuto il problema di far andare a capo solo alcune lettere a seconda della risoluzione....
Stesso discorso per i titoli neri grandi che uso per le varie sezioni (Out Now, Lyrics, Musicians, About, Songs etc etc.)
Sostanzialmente non sono poi tante le svg che mi servono....
Autore
Kola, perfetto, funziona!
A questo punto devo solo creare altri "ID"personalizzati ( ed i relativi @mediascreen da allegare nel tag head) in base all'immagine che voglio ridimensionare secondo i parametri desiderati
Autore
Kola, dove devo inserire l'ID per quanto riguarda il logo nell'header?
#imHeaderBg {
position:fixed; width: 100%; top: 12px; height: 49px; left: 62px; z-index:10399;
background-image: url("files/logo-ettore-star-extra-200-19.svg");
background-repeat: no-repeat;
}
... non mi pare troppo esteso, comunque visto che è lo sfondo, puoi regolare i pixel in questo codice:
#imHeaderBg {background-size: 200px;}
.
Autore
Kola,
Finisco di mangiare e provo
Hai ragione, non è molto esteso ma su galaxy fold viene visualizzato così:
Autore
Kola, funziona!
#imHeaderBg {background-size: 200px;}
Non riusciamo ridurre il logo soltanto nelle visualizzazion inferiori ai 319px, tramite il @mediascreen?
Autore
... è probabile però che riducendolo non si trovi più allineato bene in verticale.....
... i conti non mi tornano, devi aver cambiato qualcosa...
... attenzione! ... hai commesso un errore inserendo un DIV improprio in HEAD...
... al posto dello sfondo potresti usare un IMG...
... comunque anche per lo sfondo puoi controllarne le coordinate aggiungendo l'attributo:
background-position: 10px 50px; ... con i valori X(left) - Y(top) da personalizzare...
.
Autore
Buona Domenica, Kola, il div a cui ti riferisci è questo?
<div id="imPageToTop" class="page-to-top-visible" style="display: block;"><img src="files/arrow-square-28.svg" alt="scroll to top" id="imPageToTop_img"></div>
Cosa dovrei mettere al suo posto?
Per il resto, è andato in crash il pc e probabilmente si sono corrotti alcuni files, per questo ho caricato un back up provvisorio online.
Come faccio a recuperare un backup di quelli salvati nella cartella "backu" del programma?
Ho provato all'inizio , tramite la voce "ripristina" ma non mi compare nulla, mentre dal file manager vedo tutti i backup.
Male che vada, ho una copia del progetto di 5 giorni fa, dovrò ripassare diverse cose, ma nulla è perduto.
... non so del perchè di quel DIV extra, ma al massimo dovrebbe andare nel sezione body...
... per il ripristino devi importare con il pulsante [IMPORTA] un recente IWZIP e che sia valido, oppure seguire la prevista procedura recupero backup...
.
Autore
Ciao Kola, il DIV effettivamente bisogna collocarlo nel body, mi ero distratto durante l'inserimento del codice.
Il DIV mi serve per sovrapporre l'immagine svg a quella di default.
Se hai un'idea più funzionale, ben venga :)
Per importare un progetto non ci sono problemi, ho alcune copie meno recenti.
Per il ripristino, pensavo fosse possibile usare anche i files di backup con estensione "IWPRJ2" ma pensavo male, evidentemente.
Comunque ho risolto abbastanza in fretta.
... per poter io valutare, togli il DIV extra ed usa le opzioni normali previste per la freccia su, ...fammi sapere quando fatto e poi ti dirò...
.
Autore
Kola, ho caricato, ho tolto il div ed ho lasciato il seguente codice nell'HEAD:
#imPageToTop {
background-image: url("files/arrow-square-28.svg"); !important
position: fixed;
bottom: 13px;
right: 13px;
z-index: 10500;
opacity: 0.7;
border-radius:2px;
border: solid 1px orange;
}
Altra cosa, per poter avere due immagini in alto a sx ho usato sia l' HEADER BACKROUND (per il logo nero che funge da hamburger menu) e sia l'HEADER per avere l'immagine col nome e cognome blu-arancio di fianco al logo.
Pensavo, magari si può evitare di usare l'immagine nell'HEADER ed inserire un altro tag.... magari IMG
Hai il codice completo da inserire, eventualmente?
... vedo che la freccia torna-su non è di sfondo ma img, quindi togli quel codie, e poi vedremo con js ...
Autore
Ok, ho caricato senza il codice.
Già che ci siamo, riusciamo ad annulare l'esecuzione dello script di iubenda (quello che fa comparire il banner e poi l'iconcina) soltanto nelle due pagine "cookies policy" e "privacy policy"?
... prova con questo:
<style>
#imPageToTop_img {position:fixed; bottom:30px !important ;right:30px !important ; }
</style>
<script>
window.onscroll = function() { $('#imPageToTop_img').attr('src','https://www.ettorepoggipollini.com/files/arrow-square-28.svg');}
</script>
... ...
Già che ci siamo, riusciamo ad annulare l'esecuzione dello script di iubenda (quello che fa comparire il banner e poi l'iconcina) soltanto nelle due pagine "cookies policy" e "privacy policy"?
... mi pare che in qualche altro Topic se ne era già parlato; ...casomai per non fare confusioni, rintraccia e posta su quello o in nuovo Topic...
.
Autore
Ok, Kola, ho caricato e funziona, devo soltanto definire meglio le coordinate in modo da abbassarlo e avvicinarlo a destra come l'altro logo.
Chiudo il post!
Grazie ancora per tutto l'aiuto