Vantaxes de SVG
A medida que constrúe un sitio web e engada imaxes a ese sitio, unha das cousas máis importantes que debe determinar é que formatos de ficheiro son os correctos. Dependendo do gráfico, un formato pode ser moito mellor que outros.
Moitos diseñadores web están cómodos co formato de ficheiro JPG, e este formato é perfecto para imaxes con profundidade de cor, como as fotografías. Aínda que este formato tamén funcionaría para gráficos simples, como os íconos ilustrados, non é o mellor formato para usar nese caso. Para os íconos, SVG sería unha mellor opción. Vexamos exactamente por que:
SVG é unha tecnoloxía vectorial
Isto significa que non se trata dunha tecnoloxía ráster. As imaxes do vector son unha combinación de liñas creadas usando as matemáticas. Os ficheiros Raster usan píxeles ou pequenos cadrados de cor. Este é un dos motivos polo que o SVG é escalable e perfecto para sitios web sensibles que deben escalar xunto co tamaño da pantalla do dispositivo. Debido a que existen gráficos vectoriais no mundo das matemáticas, para cambiar o tamaño, simplemente cambia os números. Os ficheiros de Raster a miúdo requiren unha revisión significativa cando se trata de dimensionar. Cando desexa achegar unha imaxe vectorial, non hai distorsión porque o sistema é matemático eo navegador só recalcula esas matemáticas e fai as liñas tan lisas como sempre. Cando achegas unha imaxe ráster, perdes a calidade da imaxe e o arquivo comeza a ser borroso cando comeza a ver eses píxeles de cor. A matemática se expande e contrata, os píxeles non. Se queres que as túas imaxes sexan independentes de resolución, SVG che dará esa capacidade.
O SVG está baseado en texto
Cando usa un editor de gráficos para producir unha imaxe, o programa fai unha imaxe da súa obra completa. SVG funciona de forma diferente. Aínda pode usar algúns programas de software e sinta que está debuxando unha imaxe, pero o produto final é unha colección de liñas vectoriales ou incluso palabras (que son realmente só vectores na páxina). Os buscadores observan as palabras, especialmente as palabras clave. Se cargas un JPG , limitarás o título do teu gráfico e talvez a frase de texto alt . Coa codificación SVG, amplías as posibilidades e crea imaxes máis simples para o motor de procura.
SVG é XML e funciona dentro doutros formatos de idiomas
Isto remóntase ao código baseado en texto. Pode facer a súa imaxe base en SVG e usar CSS para polaco. Si, pode ter unha imaxe que é realmente un ficheiro SVG, pero tamén pode codificar o SVG directamente na páxina e editalo no futuro. Pode modificalo con CSS do mesmo xeito que modificar o texto da páxina, etc. Isto é moi potente e facilita a edición.
SVG é facilmente editado
Esta é probablemente a maior vantaxe. Cando fas unha foto dun cadrado, é o que é. Para facer un cambio, tes que restablecer a escena e tomar unha nova imaxe. Antes de que o saiba, ten 40 imaxes de cadrados e aínda non o teñen bastante ben. Con SVG, se cometes un erro, muda as coordenadas ou unha palabra nun editor de texto e está listo. Podo relacionarme con iso porque debuxei un círculo SVG que non estivese situado correctamente. Todo o que teño que facer era axustar as coordenadas.
As imaxes JPG poden ser pesadas
Se queres que a túa imaxe creza en tamaño físico, tamén crecerá no tamaño do ficheiro. Con SVG, unha libra aínda é unha libra, non importa o grande que o fagas. Un cadrado de 2 polgadas de ancho pesará o mesmo que un cadrado de 100 centímetros de ancho. O tamaño do ficheiro non cambia, o que é excelente desde o punto de vista do rendemento dunha páxina.
Entón, cal é mellor?
Entón, cal é o mellor formato - SVG ou JPG? Iso depende da imaxe en si. Isto é como preguntar "¿Que é mellor, un martelo ou un chave de fenda?" Depende do que necesites para acadar. O mesmo é certo para estes formatos de imaxe. Se precisa mostrar unha foto, entón JPG é a mellor opción para vostede. Se está a engadir un ícono, entón SVG é unha opción mellor. Podes aprender máis sobre cando é apropiado usar ficheiros SVG aquí .
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 6/6/17