Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: @XSStringManolo en 23 Agosto 2019, 03:36 am



Título: SVG responsive?
Publicado por: @XSStringManolo en 23 Agosto 2019, 03:36 am
Ando aprendiendo SVG y me encuentro haciendo una toolbar. Al hacer zoom, y dependiendo de la configuración del cliente el tamaño varía. Asique por ejemplo si se hace mucho zoom o la resolución de la pantalla es muy pequeña o muy grande va a cambiar el tamaño de la toolbar hasta el punto de que no se vea otra cosa en pantalla.

Lo que quiero es fijar el tamaño para que sea el mismo independientemente de la resolución. Podría setear el tamaño usando viewport y ajustar el tamaño trás hacer zoom a la inversa de la escala para redibujar la toolbar cada vez que se haga zoom, pero me parece una burrada de operaciones y hay que redibujar la toolbar tras cada zoom. En android es horrible como funciona porque no se redibujan los gráficos hasta que sueltas la pantalla y se ve como la toolbar desaparece un cacho hasta que le dejas redibujarse. Es una tontería pero queda muy feo. SVG no se redimensiona como un elemento HTML a pesar de poder manejarlo como tal.

Sabeis como se podría hacer:
-Que la imagen se adapte a la resolución en todo momento. (Importante para que se adapte cuando se gire la pantalla en Android)
-Que siempre ocupe lo mismo ante zooms. (Qué permaneza fija sin aumentar de tamaño)

A ver si me podeis hechar una mano que no consigo hacerlo.

El código:
Código
  1. <div class = "RectangulosFijos">
  2. <svg style ="display: block" width="100%" height="40">
  3.  
  4. <rect width="100%" height="42" style="fill:rgb(0,0,0);stroke-width:2;stroke:rgb(0,0,0)" id="Rectangulo1"
  5. onclick="MatrizRectánguloCirculo();"/>
  6. </svg>
  7. </div>
  8.  
  9. <style>
  10. .RectangulosFijos{
  11. position: fixed;
  12. left: 0;
  13. right: 0;
  14. bottom: 0;
  15. }
  16. </style>


Título: Re: SVG responsive?
Publicado por: EdePC en 23 Agosto 2019, 15:43 pm
Saludos,

Citar
-Que la imagen se adapte a la resolución en todo momento. (Importante para que se adapte cuando se gire la pantalla en Android)

- Esto no lo comprendo bien, los SVG por naturaleza son Responsive, mantienen su Aspect Ratio y ocupan todo lo que pueden de su contenedor pudiendo desbordarse.


Citar
-Que siempre ocupe lo mismo ante zooms. (Qué permaneza fija sin aumentar de tamaño)

- Los SVG siempre ocupan lo mismo sin importar el Zoom, a no ser que modifiques los estilos de su contenedor.


- Me parece que quieres una barra de botones o algo así, para esto mejor usar flexbox y/o grid, ya que los contenidos de estos son bastante fluidos y se adaptan dinámicamente a su contenedor. Un SVG en contra no puede deformarse o perder su Aspec Ratio, aunque existe la opción, no suele ser buena idea deformar, estirar, aplastar un SVG salvo que sea el efecto requerido.

- Quizá si ejemplificas algo más ...

- Tienes una forma poco ortodoxa de hacer SVG XD, yo preferiría:

Código
  1. <div class="RectangulosFijos">
  2.  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40">
  3.    <rect x="0" y="0" width="100" height="40" fill="yellow" stroke="red" stroke-width="2" />
  4.  </svg>
  5. </div>
  6. <style>
  7.  body {
  8.    margin: 0;
  9.  }
  10.  .RectangulosFijos {
  11.    position: fixed;
  12.    left: 0;
  13.    right: 0;
  14.    bottom: 0;
  15.  }
  16. </style>
  17.  


Título: Re: SVG responsive?
Publicado por: @XSStringManolo en 23 Agosto 2019, 17:12 pm
Disculpa, me cuesta explicarlo con palabras.

Quiero por ejemplo el teclado en pantalla del android dibujado con SVG. Yo ahora le doy zoom a la pantalla y veo todo más grande, pero el teclado no se mueve, siempre va a estar estático haga lo que haga en la página. Eso es lo que quiero.

Si le pongo un tamaño fijo, pasa eso con SVG. Pero si le doy zoom, el "teclado" aumenta de tamaño, por lo que me tapa la pantalla y no puedo leer este texto.

Por otro lado, si pongo un tamaño fijo, por ejemplo 40px. Consigo ese efecto. Pero si lo veo en Pc resolución alta se ve super pequeño, y si lo veo en un android con 320x128 de resolución solo veo el "teclaod encima de la página.


A ver si con ese ejemplo me expliqué mejor. Puse el SVG como banner de ejemplo en el segundo link de mi firma. Fíjate que si le das mucho zoom, se tapa la web. (Pincha el svg para cambiarle el color, que está todo negro).

Y si cambias de resolución también pasa lo mismo. Cómo lo puedo fixear? Alguna idea?

http://stringmanolo.byethost12.com


Título: Re: SVG responsive?
Publicado por: engel lex en 23 Agosto 2019, 17:15 pm
creo que la solucion (no he probado) seria usarlo con position:fixed a width:100% pero creo que te tocaría igual usar js para pegarlo a un lugar de la pantalla


Título: Re: SVG responsive?
Publicado por: EdePC en 24 Agosto 2019, 16:57 pm
- Mientras tu viewBox sea dinámico/automático también lo será la escalibidad del SVG. Especifica un viewBox y el SVG se mantendrá tal cual:

Citar
      <div class="BannerFijadoAbajo">
        <svg viewBox="0 0 100 10">
          <rect width="100" height="10" style="fill:rgb(0,0,0);stroke-width:2;stroke:rgb(0,0,0)" id="Rectangulo2" onclick="CambiarColorRectangulo();"/>
        </svg>
      </div>
      <div class="BannerFijado">
        <svg viewBox="0 0 100 20">
          <g>
            <rect width="100" height="20" style="fill:rgb(0,0,0);stroke-width:2;stroke:rgb(0,0,0)" id="Rectangulo1" onclick="CambiarColorRectangulo();"/>

-- El viewBox especifica el Aspect-Ratio, sirve de máscara y sienta la base para dibujar los elementos del contenidos en el SVG, la medida es en Puntos como si fuera un plano cartesiano. El SVG se adaptará lo más posible a su contenedor manteniendo su aspect-ratio (sin deformarse, salvo que se indique lo contrario), es decir, siempre será width: 100%; height: auto;

- Con eso el SVG será siempre el mismo y no cambiará por más que se cambie el Zoom.

- Con respecto a las vistas horizontal y vertical, el SVG no puede ser el mismo ya que se tendría que deformar, lo mejor es usar un media-query para transformar el SVG o poner otro en su lugar, tal cual pasa con el teclado Android, no es el mismo cuando esta en modo Portrait (vertical) y modo Landspace (horizontal), al menos el mio no XD. A no ser que especifiques el permiso de preserveAspectRatio="none"


Título: Re: SVG responsive?
Publicado por: @XSStringManolo en 24 Agosto 2019, 18:09 pm
- Mientras tu viewBox sea dinámico/automático también lo será la escalibidad del SVG. Especifica un viewBox y el SVG se mantendrá tal cual:

-- El viewBox especifica el Aspect-Ratio, sirve de máscara y sienta la base para dibujar los elementos del contenidos en el SVG, la medida es en Puntos como si fuera un plano cartesiano. El SVG se adaptará lo más posible a su contenedor manteniendo su aspect-ratio (sin deformarse, salvo que se indique lo contrario), es decir, siempre será width: 100%; height: auto;

- Con eso el SVG será siempre el mismo y no cambiará por más que se cambie el Zoom.

- Con respecto a las vistas horizontal y vertical, el SVG no puede ser el mismo ya que se tendría que deformar, lo mejor es usar un media-query para transformar el SVG o poner otro en su lugar, tal cual pasa con el teclado Android, no es el mismo cuando esta en modo Portrait (vertical) y modo Landspace (horizontal), al menos el mio no XD. A no ser que especifiques el permiso de preserveAspectRatio="none"
Probé con el código que me muestras y se queda todo centrad en medio, con un tamapo enorme que no se ven ni la letras. Sigue teniendo el problema de que es distinto en cada resolución, entonces no sé para que me sirve?

 Estuve mirando antes de hacer el post y había que manejar matrices y el sistema de coordenadas de viewbox me parece absurdamente complejo. Cuando por ejemplo superas el tamaño del viewbox los elementos se mueven hacia la derecha en vez de agrandarse. Quise dibujar el texto con svg y me fue totlmente imposible dibujar una M. Asique al final use la etiqueta para el texto por ese motivo con el objetivo de crear una ttf.
Puse una de prueba en la carpeta del host y no me la carga.

Vaya rollazo xD.

Buscaré ejemplos ya hechos para ver como lo manejan, porque me da a mi que esto es bastante complejo.


Título: Re: SVG responsive?
Publicado por: MinusFour en 24 Agosto 2019, 19:17 pm
Yo creo que no estás considerando el contenedor del SVG. Cuando tu le dices al contenedor de SVG que vaya al 100% del ancho o del alto, le estás diciendo que trabaje con las dimensiones del padre. Si el padre escala, el SVG escala.

Lo que tu quieres hacer creo que tiene más sentido trabajar con vh o vw que con las unidades relativas al contenedor padre.


Título: Re: SVG responsive?
Publicado por: @XSStringManolo en 24 Agosto 2019, 20:08 pm
Creo que eso no me lo soluciona Minusfour, porque entonces al viewport le tengo que poner tamaño y estoy en las mismas no? Ya que si se lo pongo fijo al cambiar de resolución se ve distinto.

Mira el banner de este sitio que se activa al bajar el documento. Es eso exactamente lo que busco. Voy a mirar el código a ver si consigo entender como está hecho.

https://davidwalsh.name/building-animated-svg-banners


Título: Re: SVG responsive?
Publicado por: EdePC en 24 Agosto 2019, 21:05 pm
- Pero ese banner no es SVG, ni se ajusta a lo que has pedido al principio, si hago zoom se amplia y reduce también :xD

- Me parece que no estás poniendo la etiqueta meta viewport para que funcione correctamente en dispositivos móviles. Cuando llega a casa lo pruebo en un móvil y hago las capturas ...


Título: Re: SVG responsive?
Publicado por: MinusFour en 24 Agosto 2019, 21:40 pm
Es algo díficil de demostrar como funciona vh y zoom en linea, porque la mayoría de los sitios usan frames de alguna forma u otra. Cuando tu haces zoom con el navegador, el viewport de tu navegador no cambia. Sigue siendo el mismo. El navegador no escala unidades relativas. 50% de un contenedor sigue siendo 50% cuando haces zoom.

Si tu SVG usa unidades absolutas si las escala. Es decir, si tienes un SVG con 500px de alto o 500px de ancho, el navegador escala esas unidades.

Edit:
Mira este es un ejemplo que saque de Mozilla:

Código
  1. <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect -->
  2. <head>
  3. html,body { margin: 0px; }
  4. svg { /*max-width: 50vh;*/ height: 50vh;}
  5. </style>
  6. </head>
  7. <body>
  8. <div>
  9. <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  10.   <!-- Simple rectangle -->
  11.   <rect width="100" height="100" />
  12.   <!-- Rounded corner rectangle -->
  13.   <rect x="120" width="100" height="100" rx="15" />
  14. </svg>
  15. </div>
  16. </body>
  17. </html>

Lo único que hice fue darle un alto de 50vh, puedes hacerle zoom y no le pasa nada al contenedor (esto sin frames). Puedes hacer lo mismo con el % siempre y cuando estés pasando el tamaño del viewport desde la etiqueta HTML (pero para que hacer eso, si puedes usar las unidades de viewport).


Título: Re: SVG responsive?
Publicado por: @XSStringManolo en 24 Agosto 2019, 22:13 pm
Es algo díficil de demostrar como funciona vh y zoom en linea, porque la mayoría de los sitios usan frames de alguna forma u otra. Cuando tu haces zoom con el navegador, el viewport de tu navegador no cambia. Sigue siendo el mismo. El navegador no escala unidades relativas. 50% de un contenedor sigue siendo 50% cuando haces zoom.

Si tu SVG usa unidades absolutas si las escala. Es decir, si tienes un SVG con 500px de alto o 500px de ancho, el navegador escala esas unidades.

Edit:
Mira este es un ejemplo que saque de Mozilla:

Código
  1. <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect -->
  2. <head>
  3. html,body { margin: 0px; }
  4. svg { /*max-width: 50vh;*/ height: 50vh;}
  5. </style>
  6. </head>
  7. <body>
  8. <div>
  9. <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  10.   <!-- Simple rectangle -->
  11.   <rect width="100" height="100" />
  12.   <!-- Rounded corner rectangle -->
  13.   <rect x="120" width="100" height="100" rx="15" />
  14. </svg>
  15. </div>
  16. </body>
  17. </html>

Lo único que hice fue darle un alto de 50vh, puedes hacerle zoom y no le pasa nada al contenedor (esto sin frames). Puedes hacer lo mismo con el % siempre y cuando estés pasando el tamaño del viewport desde la etiqueta HTML (pero para que hacer eso, si puedes usar las unidades de viewport).
No le pasa nada al contenedor pero si al contenido. Al darle zoom aumenta el tamaño de los rectángulos. Si los pongo de banner al hacer zoom o cambiar la resolución se ven más grandes. Si la resolución es baja, se superpone al contenido de la web y solo ves el rectángulo.
Cómo me sirve ese código? Es exactamente lo mismoque tenía cona diferencia de que no se mueve, entonces si lo pongo de toolbar, no baja con la web. :(

Cita de: EdePC
- Pero ese banner no es SVG, ni se ajusta a lo que has pedido al principio, si hago zoom se amplia y reduce también :xD

- Me parece que no estás poniendo la etiqueta meta viewport para que funcione correctamente en dispositivos móviles. Cuando llega a casa lo pruebo en un móvil y hago las capturas ...
En android está bloqueada la página para no hacer zoom no vi ese problema O.o

No sabía si era SVG o no, vi esa barra buscando y decidí pasar la web porque la funcionalidad es muy similar a lo que intento hacer. Prácticmente es lo mismo, pero con las diferencias de que no se amplie al hacer zoom, y que la barra se muestre todo el rato, no solo al bajar por el documento.

Yo tengo muy claro el resultado final que busco, pero igual no lo explico bien, perdonad.


Título: Re: SVG responsive?
Publicado por: MinusFour en 24 Agosto 2019, 22:43 pm
Ok, bueno me voy dando cuenta que el zoom en android no es igual que el zoom del escritorio. El código funciona en el navegador de escritorio. Quizás el zoom del móvil es gráfico. No se si haya alguna forma de leer el nivel del zoom y dividir las unidades por el zoom.

Puedes deshabilitar escalar la pagina por meta tags pero me imagino que lo que quieres es que el usuario pueda agrandar otras cosas mientras que una parte se queda igual.


Título: Re: SVG responsive?
Publicado por: @XSStringManolo en 25 Agosto 2019, 00:16 am
Ok, bueno me voy dando cuenta que el zoom en android no es igual que el zoom del escritorio. El código funciona en el navegador de escritorio. Quizás el zoom del móvil es gráfico. No se si haya alguna forma de leer el nivel del zoom y dividir las unidades por el zoom.

Puedes deshabilitar escalar la pagina por meta tags pero me imagino que lo que quieres es que el usuario pueda agrandar otras cosas mientras que una parte se queda igual.
Sí, tiene retardo y todo si haces zoom muy rápido. Debe tener una capa de software independiente ahí.
Si se puede hacer lo que dices, lo comento en el primer post. Se puede hacer con la matriz, pero me parecen demasiadas operaciones y que reacciona mal haciendo cosas raras (en Android). Estoy seguro al 400% que hay otra manera de hacerlo y realmente bien, que quede perfecto. Y lo que tengo yo hecho es basura basura.

Exactamente eso, quiero que se pueda hacer zoom, porque yo lo uso muchísimo para leer a gusto.

Lo peor es que la página es para poder visualizarla toda sin imágenes habilitadas en el navegador. Asique necesito SVG sí o sí.


Título: Re: SVG responsive?
Publicado por: MinusFour en 25 Agosto 2019, 00:57 am
Sí, tiene retardo y todo si haces zoom muy rápido. Debe tener una capa de software independiente ahí.
Si se puede hacer lo que dices, lo comento en el primer post. Se puede hacer con la matriz, pero me parecen demasiadas operaciones y que reacciona mal haciendo cosas raras (en Android). Estoy seguro al 400% que hay otra manera de hacerlo y realmente bien, que quede perfecto. Y lo que tengo yo hecho es basura basura.

Exactamente eso, quiero que se pueda hacer zoom, porque yo lo uso muchísimo para leer a gusto.

Lo peor es que la página es para poder visualizarla toda sin imágenes habilitadas en el navegador. Asique necesito SVG sí o sí.


El problema no es SVG. Porque tu a SVG le das dimensiones y todo lo que está dentro de tu SVG escala con el sistema de coordenadas de tu viewbox. Esto es con cualquier elemento. Si el viewport no es consistente através del zoom, lo único que queda son hacks para ajustar los tamaños. Porque aquí ya estás entrando en cosas que no son estándar.

Yo hasta diría que es un bug (pero no lo es). El viewport es prácticamente la ventana por la que ves el contenido. En todo momento 10vh debería ser el 10% del alto de la cual estás viendo el contenido.


Título: Re: SVG responsive?
Publicado por: EdePC en 25 Agosto 2019, 05:58 am
- Nop, el Zoom del móvil es como el zoom de la lupa de windows, sirve para agrandar todo, no tiene efecto sobre el viewport, tamaño de letras, etc, es decir te amplia el webview y no el DOM.

- Yo solo utilizo el Android para leer el correo y ver YouTube, para lo demás tengo una Tablet con Windows 10, esta tablet al igual que el android tiene una pantalla táctil que permite hacer zoom sobre el webview del navegador web y aparte puedo usar el zoom del propio navegador web, no son lo mismo, uno actúa como una lupa y el otro cambia el devicePixelRatio o ppp.

oyjnPmJkN8w

- Para que el viewport se adapte al devicePixRatio y no se vea raro (como lo son programas clásicos funcionando en monitores 4k, todo se ve diminuto) se utiliza la etiqueta meta viewport que solo funciona en móviles para corregir este problema (en PC se ignora completamente):

Código
  1. <meta name="viewport" content="width=device-width, initial-scale=1">

-- Y opcionalmente se agrega el user-scalable=no para evitar el zoom sobre el webview en dispositivos móviles.

Código
  1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

- En PC el SVG trabaja así:

Código
  1.  <head>
  2.    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  3.    <style>
  4.      html, body     { margin: 0; }
  5.      header, footer { position: fixed; left: 0; right: 0; }
  6.      header         { top: 0; }
  7.      footer         { bottom: 0; }
  8.      section :first-child { margin-top: 20%; }
  9.      section :last-child  { margin-bottom: 15%; }
  10.  </style>
  11.  </head>
  12.  <body>
  13.    <header>
  14.      <svg id="svgh" viewBox="0 0 100 15">
  15.        <rect width="100" height="15" fill="blue"/>
  16.      </svg>
  17.    </header>
  18.    <section>
  19.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  20.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  21.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  22.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  23.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  24.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  25.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  26.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  27.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  28.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  29.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  30.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  31.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  32.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  33.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  34.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  35.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  36.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  37.    </section>
  38.    <footer>
  39.      <svg id="svgf" viewBox="0 0 100 10">
  40.        <rect width="100" height="10" fill="tomato"/>
  41.      </svg>
  42.    </footer>
  43.  </body>
  44. </html>
  45.  

(https://i.ibb.co/Qndzscw/360x540.gif)

- Los SVG trabajan con el Pixel-Ratio dado por el viewBox (100*15 y 100*10 respectivamente en el ejemplo), por esto puede haber problemas al cambia el tamaño del view-port por ejemplo al pasar del Horizontal al Vertical.

- El SVG en sí, si que puede adaptarse a unidades viewport (en mi caso me da igual usar % ya que el contenedor es bloque al 100%, puedes cambiar width="100%" height="15%" a width="100vw" height="15vh"), pero sus elementos por defecto se alinearán al centro, me parece que esto es lo que estás buscando (fíjate en el svg amarillo por supuesto):

Código
  1.  <head>
  2.    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  3.    <style>
  4.      html, body     { margin: 0; }
  5.      header, footer { position: fixed; left: 0; right: 0; }
  6.      header         { top: 0; }
  7.      footer         { bottom: 0; }
  8.      section :first-child { margin-top: 20vh; }
  9.      section :last-child  { margin-bottom: 10%; }
  10.  </style>
  11.  </head>
  12.  <body>
  13.    <header>
  14.      <svg id="svgh" viewBox="0 0 105 15" width="100%" height="15%" style="background-color: yellow">
  15.        <rect x="5"  y="3" width="20" height="10" fill="blue"/>
  16.        <rect x="30" y="3" width="20" height="10" fill="orange"/>
  17.        <rect x="55" y="3" width="20" height="10" fill="green"/>
  18.        <rect x="80" y="3" width="20" height="10" fill="red"/>
  19.      </svg>
  20.    </header>
  21.    <section>
  22.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  23.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  24.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  25.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  26.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  27.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  28.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  29.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  30.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  31.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  32.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  33.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  34.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  35.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  36.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  37.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  38.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  39.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  40.    </section>
  41.    <footer>
  42.      <svg id="svgf" viewBox="0 0 100 10">
  43.        <rect width="100" height="10" fill="tomato"/>
  44.      </svg>
  45.    </footer>
  46.  </body>
  47. </html>
  48.  

(https://i.ibb.co/bdT7rYW/svg-responsive-content.gif)

- Sin embargo, es más sencillo hacerlo usar flexbox/grid, aunque dependerá de los items que quieras poner en tu "banner"

- Por cierto, puedes utilizar el gratuito InkScape para hacer el SVG, este programa trabaja netamente con SVG, además tiene la opción de mostrar y editar el código SVG directamente (algo rudimentario), para cosas más complejas Illustrator XD.


Título: Re: SVG responsive?
Publicado por: MinusFour en 25 Agosto 2019, 06:58 am
Yo me pierdo, ¿Dices que tienes dos modos de hacer Zoom en tu navegador? Al menos mi Google Chrome en mi móvil Android no me deja hacer zoom para nada con el meta tag.


Título: Re: SVG responsive?
Publicado por: @XSStringManolo en 25 Agosto 2019, 06:59 am
- Nop, el Zoom del móvil es como el zoom de la lupa de windows, sirve para agrandar todo, no tiene efecto sobre el viewport, tamaño de letras, etc, es decir te amplia el webview y no el DOM.

- Yo solo utilizo el Android para leer el correo y ver YouTube, para lo demás tengo una Tablet con Windows 10, esta tablet al igual que el android tiene una pantalla táctil que permite hacer zoom sobre el webview del navegador web y aparte puedo usar el zoom del propio navegador web, no son lo mismo, uno actúa como una lupa y el otro cambia el devicePixelRatio o ppp.

oyjnPmJkN8w

- Para que el viewport se adapte al devicePixRatio y no se vea raro (como lo son programas clásicos funcionando en monitores 4k, todo se ve diminuto) se utiliza la etiqueta meta viewport que solo funciona en móviles para corregir este problema (en PC se ignora completamente):

Código
  1. <meta name="viewport" content="width=device-width, initial-scale=1">

-- Y opcionalmente se agrega el user-scalable=no para evitar el zoom sobre el webview en dispositivos móviles.

Código
  1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

- En PC el SVG trabaja así:

Código
  1.  <head>
  2.    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  3.    <style>
  4.      html, body     { margin: 0; }
  5.      header, footer { position: fixed; left: 0; right: 0; }
  6.      header         { top: 0; }
  7.      footer         { bottom: 0; }
  8.      section :first-child { margin-top: 20%; }
  9.      section :last-child  { margin-bottom: 15%; }
  10.  </style>
  11.  </head>
  12.  <body>
  13.    <header>
  14.      <svg id="svgh" viewBox="0 0 100 15">
  15.        <rect width="100" height="15" fill="blue"/>
  16.      </svg>
  17.    </header>
  18.    <section>
  19.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  20.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  21.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  22.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  23.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  24.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  25.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  26.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  27.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  28.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  29.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  30.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  31.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  32.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  33.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  34.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  35.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  36.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  37.    </section>
  38.    <footer>
  39.      <svg id="svgf" viewBox="0 0 100 10">
  40.        <rect width="100" height="10" fill="tomato"/>
  41.      </svg>
  42.    </footer>
  43.  </body>
  44. </html>
  45.  

(https://i.ibb.co/Qndzscw/360x540.gif)

- Los SVG trabajan con el Pixel-Ratio dado por el viewBox (100*15 y 100*10 respectivamente en el ejemplo), por esto puede haber problemas al cambia el tamaño del view-port por ejemplo al pasar del Horizontal al Vertical.

- El SVG en sí, si que puede adaptarse a unidades viewport (en mi caso me da igual usar % ya que el contenedor es bloque al 100%, puedes cambiar width="100%" height="15%" a width="100vw" height="15vh"), pero sus elementos por defecto se alinearán al centro, me parece que esto es lo que estás buscando (fíjate en el svg amarillo por supuesto):

Código
  1.  <head>
  2.    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  3.    <style>
  4.      html, body     { margin: 0; }
  5.      header, footer { position: fixed; left: 0; right: 0; }
  6.      header         { top: 0; }
  7.      footer         { bottom: 0; }
  8.      section :first-child { margin-top: 20vh; }
  9.      section :last-child  { margin-bottom: 10%; }
  10.  </style>
  11.  </head>
  12.  <body>
  13.    <header>
  14.      <svg id="svgh" viewBox="0 0 105 15" width="100%" height="15%" style="background-color: yellow">
  15.        <rect x="5"  y="3" width="20" height="10" fill="blue"/>
  16.        <rect x="30" y="3" width="20" height="10" fill="orange"/>
  17.        <rect x="55" y="3" width="20" height="10" fill="green"/>
  18.        <rect x="80" y="3" width="20" height="10" fill="red"/>
  19.      </svg>
  20.    </header>
  21.    <section>
  22.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  23.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  24.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  25.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  26.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  27.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  28.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  29.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  30.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  31.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  32.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  33.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  34.      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  35.      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  36.      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  37.      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  38.      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  39.      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  40.    </section>
  41.    <footer>
  42.      <svg id="svgf" viewBox="0 0 100 10">
  43.        <rect width="100" height="10" fill="tomato"/>
  44.      </svg>
  45.    </footer>
  46.  </body>
  47. </html>
  48.  

(https://i.ibb.co/bdT7rYW/svg-responsive-content.gif)

- Sin embargo, es más sencillo hacerlo usar flexbox/grid, aunque dependerá de los items que quieras poner en tu "banner"

- Por cierto, puedes utilizar el gratuito InkScape para hacer el SVG, este programa trabaja netamente con SVG, además tiene la opción de mostrar y editar el código SVG directamente (algo rudimentario), para cosas más complejas Illustrator XD.
Creo que tal y como está ahora se ve decente. Añadí:
Código
  1. <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
A ver lo del zoom que le hago en PC. Estoy poniendo un url para eliminar la etiqueta y el banner por si se necesita zoom o se quiere ver toda la pantalla para leer más cómodo. Lo acabaré integrando en el banner/toolbar. Tengo en mente convertir el rectángulo en un círculo y dejar el círculo en una esquina para poder restaurar la barra de herramientas. Podría hacer la animación de forma fake con Three. O quizás con D3 sea más fácil que usando SVG para hacerlo de verdad. Se me va a complicar mucho, pero por intentarlo que no quede xD. A ver que hago con el tema de javascript para Tor para mostrar un banner con SVG.

Anda, que buena info! Justo mencionas la etiqueta que puse jajaja.
Tengo que probar la página como está en varias resoluciones a ver si así ya queda decente. También mirar el tema de los bordes. Se ve un hueco en blanco al lado del borde al mover la pantalla como para hacer zoom.

Miraré todo lo que habeis comentado al máximo detalle cuando empiece a aplicar CSS. E estado viendo varios atributos que más o menos me lo dejan mejor, pero tuve algunos problemas con algunos, asique las quité todas e iré probándolas con el SVG una a una.

Muchas gracias por todo el curro!!! ♡♡♡


Título: Re: SVG responsive?
Publicado por: EdePC en 25 Agosto 2019, 16:02 pm
Yo me pierdo, ¿Dices que tienes dos modos de hacer Zoom en tu navegador? Al menos mi Google Chrome en mi móvil Android no me deja hacer zoom para nada con el meta tag.

- El Chrome de android tiene en configuración > accesibilidad > Forzar zoom, para ignorar la etiqueta user-scalable=no

- Y si tengo 2 zoom XD, pero no en android, sino en una tablet con Windows 10 (Lenovo Yoga Book: https://www.youtube.com/watch?v=5Yhg3DgOMMU) en mi caso, pero debe ser igual con cualquier LapTop, NoteBook, Tablet PC con pantalla táctil, como se puede ver a continuación, el zoom que se hace con los dedos (pinch):

(https://i.stack.imgur.com/aTb1Y.jpg)


-- Se puede apreciar que el Zoom se hace sobre el WebView como si se tratara de la Lupa de Windows, pero que actúa solo sobre el WebView del Navegador, nótese que el navegador tal cual no detecta ningún cambio en su nivel de zoom.

(https://i.ibb.co/NYpVptk/pinch-touch-zoom.gif)

- Por otro lado, el zoom genérico del navegador (Ctrl + +/- ó Pinch en el panel táctil (no confundir con pantalla táctil)) si que es detectado y muestra la leyenda 100% 125% 150% 200% cuando se varía el zoom:

(https://i.ibb.co/HPyQkpD/normal-zoom.gif)

- Pues ya está, los navegadores web móviles tienen el zoom sobre el WebView por medio de tu pantalla táctil, pero un navegador de escritorio puede tener además de este, el zoom clásico sobre el ViewPort (variando los ppp)


Título: Re: SVG responsive?
Publicado por: MinusFour en 25 Agosto 2019, 16:26 pm
El Chrome de mi Android hace lo mismo con esa opción. Es el mismo zoom. Mira, está es la pantalla de mi android del HTML que pusiste con la escala inicial.

(https://i.imgur.com/ZaLs0O7.png)

Y cuando hago zoom, con cualquiera de los métodos que has puesto:

(https://i.imgur.com/sx2dHYY.png)


Título: Re: SVG responsive?
Publicado por: EdePC en 25 Agosto 2019, 18:03 pm
- Ese es el zoom sobre el WebView, te fijas que el <p> aunque es una etiqueta de bloque y ocupa el 100% de su contenedor (en este caso el <body>) se desborda, cosa que no ocurre con un zoom convencional en PC (Ctrl + +/-) donde nunca se desborda, el móvil no soporta este método de Zoom, he conectado un teclado a mi Android y Ctrl + +/- no funciona en embargo se puede configurar en  Configuración > Accesibilidad > Ajuste de texto y cambiar el clásico zoom, ahí el texto se amplía pero nunca es lo mismo que un zoom en PC que cambia el PixelRatio.

- Digamos que Chrome de escritorio tiene tres formas de zoom:

1. Ctrl + +/- (cambia el PixelRatio (ver en la consola como varía: devicePixelRatio))
2. Pinch (cambia el tamaño del WebView, zoom estilo Lupa de Windows sobre el WebView)
3. Tamaño de la fuente (chrome://settings/?search=tama%C3%B1o+de+la+fuente) lo mismo que en Accesibilidad > Ajuste de texto del Android