css - subir - ¿Cómo puedo preparar un archivo SVG de Inkscape para un diseño web sensible?

svg web

Question

He estado haciendo un tutorial en Treehouse sobre diseño web sensible. En este punto del tutorial, se nos pide que conviertan una imagen en un svg para que pueda escalar de forma totalmente responsiva.

En lugar de usar Adobe Illustrator, que no tengo, usé el software gratuito Inkscape. Una vez que la imagen se convierte, se nos pide que la abramos en un editor de texto, eliminemos los requisitos de altura y anchura de la declaración svg y agreguemos el selector de objetos a nuestra regla de ancho máximo a nuestro estilo css:

  img, object {
max-width: 100%;
}    

Sin embargo, después de eliminar la altura y el ancho, la imagen no responde, sino que se recorta de forma extraña, de esta forma:

¿Alguien sabe que error he cometido? O lo que debería haber eliminado?

Lo siento si la pregunta ha sido hecha antes, no puedo encontrarla.

edit1, el código:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   width="319"
   height="177"
   sodipodi:docname="logo.gif">
  <metadata
     id="metadata2991">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs2989" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview2987"
     showgrid="false"
     inkscape:zoom="0.94984326"
     inkscape:cx="159.5"
     inkscape:cy="88.5"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2985" />
  <image
     width="319"
     height="177"
     xlink:href="

Es la "altura" y el "ancho" en la primera etiqueta SVG que he eliminado.

Answer 1

Como puedes leer aquí (y para completar la respuesta de qed ):

1. Seleccione el objeto (s) para exportar
2. Abra la ventana de propiedades del documento ( Ctrl + Shift + D )
3. Seleccione "Cambiar tamaño de página a dibujo o selección"
4. Archivo> Guardar como copia ...
5. Seleccione SVG optimizado como el formato

Answer 2

El hecho de que acaba de poner una imagen rasterizada en su SVG no es la razón real de lo que está viendo.

Todo lo que significa es que cuando la escala del SVG funciona correctamente (ver más abajo), no verá los beneficios de usar ilustraciones vectoriales. Cuando escalas ilustraciones vectoriales, no obtienes los "jaggies" (bloqueos) que obtienes al escalar mapas de bits. Si su SVG solo contiene un mapa de bits, es casi lo mismo que usar el mapa de bits.

El problema real aquí es que Inkscape no incluye un atributo viewBox en los SVG que guarda.

Cuando eliminas los atributos "ancho" y "alto", se establecen de forma predeterminada en "100%". Lo que le dice al navegador que escale el SVG para que se ajuste al contenedor primario. Desafortunadamente, para que esta escala funcione, el navegador necesita saber cuáles son las dimensiones del contenido SVG. Para eso es el atributo viewBox.

Illustrator agrega el atributo viewBox, Inkscape no.

Para ver lo que quiero decir, agregue lo siguiente a su etiqueta <svg> después de eliminar el ancho y la altura:

viewBox="0 0 319 177"

Debería encontrar que su imagen ya no está recortada y que cambiará de tamaño cuando la página cambie de tamaño.

Answer 3

Inkscape ahora ofrece una opción para habilitar el cuadro de vista si guarda el archivo como "svg optimizado". ¡Muy útil!

Answer 4

• Has hecho algo mal si estás "convirtiendo" raster a gráficos vectoriales. No habiendo usado Inkscape, no puedo decirlo, pero al menos según Wikipedia no es capaz de realizar conversiones.

• ¡No has convertido nada, tu imagen está en formato de intercambio de gráficos!

Para ver cómo se ve un archivo SVG "real", abra el ejemplo de la página wiki .