Gráficos svg
Tabla de contenidos
Tabla de contenidos
Que es un svg :un svg es un archivo con extensión «.svg»
Un S.V.G (Scalable Vector Graphics) son:
- Gráficos vectoriales : Una imagen digital formada por objetos geométricos con atributos matemáticos que conforman figuras
- Son bidimensionales
- Redimensiónales o escalables: se adaptan a la extensión del volumen que le es asignada sin perder calidad en la imagen.
- Es un formato estandarizado en formato XML.
- Puede ser modificado desde cualquier editor de textos.
- Todos los navegadores lo soportan y otros programas de edición de gráficos vectoriales
- Es una archivo independiente , no necesita ningún tipo de biblioteca anexa para ejecutarse
- Son animable tanto por javascript, css como dentro del código del svg.
- Como admite código dentro de su texto puede ser utilizado maliciosamente
- Si los gráficos son sencillos el peso del gráfico es inferior al de pixeles.
- Soportan estilos css.
- Soportan modificaciones con javascript en el DOM del documento
- WordPress no admite, por seguridad, la subida de archivos SVG necesita un plugin aparte.
- Es interactivo puede actuar o modificarse con eventos javascript y css
- Se pueden realizar desde figuras simples de una sola poli línea (path) a animaciones web muy complejas y divertidas
- Actualmente es el formato que mas avance va a tener en el desarrollo web, aun siendo un formato muy antiguo
- Con los gráficos svg se pueden realizar logotipos para poder insertarlos en la web
En nuestra página web podrás realizar el paso de svg a png online
En nuetra pagina central de creación de logotipos online ,Encontraras mas de 45000 fuentes externas para insertarlas en tu web y podras descargarlas gratuitamente. asi como cientos de figuras vectoriales listas para crear tus logotipos.
https://animacionesweb.online es un svg editor online gratuito donde podrás crear tus logotipos svg online y gratuitamente
En este blog podrás aprender el código para poder modificar tus logotipos y figuras svg y crea increíbles animaciones web
Ejemplo de que es un svg
código ejemplo de un svg
<svg class="img-responsive" version="1.1" id="Capa_11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox = "0 0 1340 600">
<defs>
<linearGradient id="3" gradientUnits="" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0" stop-color="rgb(46, 46, 254)"></stop><stop offset="1" stop-color="rgb(169, 169, 245)"></stop>
</linearGradient></defs><defs>
<radialGradient id="4" gradientUnits="" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0" stop-color="rgb(250, 88, 208)"></stop><stop offset="1" stop-color="rgb(138, 8, 75)"></stop>
</radialGradient></defs>
<g id="todos3" >
<defs>
<style type="text/css"> .a46{
animation-duration:30s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state:running;
animation-name:a46;
}
@keyframes a46
{
0.1% {
transform: matrix3d(0.939693,0,0.34202,0,0,1,0,0,-0.34202,0,0.939693,0,168.179,0,-106.35,1);
}
20% {
transform: matrix3d(0.34202,0,-0.939693,0,0,1,0,0,0.939693,0,0.34202,0,353,0,290,1);
}
40% {
transform: matrix3d(-2.17857e-7,0,-1,0,0,1,0,0,1,0,-2.17857e-7,0,458.764,0,308.649,1);
}
60% {
transform: matrix3d(-0.5,0,-0.866026,0,0,1,0,0,0.866026,0,-0.5,0,613.381,0,267.22,1);
}
80% {
transform: matrix3d(-0.866026,0,-0.5,0,0,1,0,0,0.5,0,-0.866026,0,726.569,0,154.032,1);
}
100% {
transform: matrix3d(-0.984808,0,-0.173648,0,0,1,0,0,0.173648,0,-0.984808,0,763.3,0,53.1126,1);
}}</style> </defs><defs>
<style type="text/css"> .a47{
animation-duration:30s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-play-state:running;
animation-name:a47;
}
@keyframes a47
{
0.1% {
transform: matrix3d(0.984808,0,0.173648,0,0,1,0,0,-0.173648,0,0.984808,0,4.69756,0,501.302,1);
}
20% {
transform: matrix3d(0.866026,0,-0.5,0,0,1,0,0,0.5,0,0.866026,0,41.4291,0,709.617,1);
}
40% {
transform: matrix3d(0.5,0,-0.866026,0,0,1,0,0,0.866026,0,0.5,0,154.617,0,822.805,1);
}
60% {
transform: matrix3d(-0.173648,0,-0.984808,0,0,1,0,0,0.984808,0,-0.173648,0,362.932,0,859.536,1);
}
80% {
transform: matrix3d(-0.642788,0,-0.766045,0,0,1,0,0,0.766045,0,-0.642788,0,508.006,0,791.887,1);
}
100% {
transform: matrix3d(-1,0,2.17857e-7,0,0,1,0,0,-2.17857e-7,0,-1,0,618.468,0,555,1);
}}</style> </defs>
<g id="46"> <g name="draga" id="Decora_0401557309196" class="a46" style="transform: matrix3d(0.9396932079436155,0,0.34202003979392304,0,0,1,0,0,-0.34202003979392304,0,0.9396932079436155,0,168.178566993561,0,-106.35016574314892,1)">
<g>
<path d="M317.864,45.321c0.368-0.771,13.906-29.189,52.57-29.744c38.604-0.533,50.145,28.148,50.494,29.033
c-0.285-21.76,35.988-22.987,59.936-23.322c23.957-0.345,114.675-1.615,114.675-1.615c0.275,19.613-38.146,23.047-38.146,23.047
c7.395,10.787-3.344,21.819-3.344,21.819c-8.12-9.315-32.057-8.991-32.057-8.991c0.197,13.788-21.337,31.519-21.337,31.519
c1.725-32.694-38.118-26.328-38.118-26.328s7.414,10.787-2.598,21.819c-10.001,11.023-7.746,16.809-7.746,16.809
c-14.513,0.197-30.008-17.002-30.008-17.002c-2.687,16.024-27.77,38.128-52.462,38.483c-24.683,0.344-55.886,0.777-55.886,0.777
c-0.295-21.044,29.427-24.371,29.427-24.371c-1.07-23.937,22.082-30.067,22.082-30.067s-1.294,11.63,10.327,11.483
c11.61-0.178,16.346-24.919-13.388-22.329c-29.732,2.59-51.43,58.792-70.797,76.494c-19.347,17.681-39.783,9.995-39.783,9.995
c-11.384,15.406-23.103,9.043-23.103,9.043c-2.706,13.827-16.542,10.385-16.542,10.385l-2.598-1.58
c-7.708,19.589-21.88,35.932-39.965,46.369c-2.87,11.488-8.379,24.402-18.87,26.497c0,0,6.758,15.876-9.197,17.554
c0,0,13.791,51.345-35.348,67.282c0,0,9.66,16.563,0.413,29.753c-8.986,12.817-21.675,6.519-22.396,6.14
c1.021,0.712,30.288,21.006,4.208,43.491c0,0-16.61-25.546-26.222-7.629c-10.629,19.751,9.729,22.379,1.238,37.01
c-8.512,14.631-29.595,12.771-32.734-3.901c-3.119-16.651-10.379-67.369,8.262-84.346c18.642-16.936,17.866-19.828,17.866-19.828
s-16.71-1.215-27.076-15.601c-10.355-14.355-9.985-39.068,10.049-60.377c19.973-21.288-11.194-33.184-13.504-33.214
c0.924-0.432,36.133-16.109,44.413,10.991c0,0,15.964-0.216,18.25,7.011c2.265,7.227-9.992,12.463-9.992,12.463
s13.16,7.08,13.357,21.614c0,0-21.77-0.431-21.583,13.367c0.197,13.787,33.735,24.925,46.246-15.184
c5.143-16.498,1.097-30.662-5.46-41.624c-44.936-5.811-79.94-43.773-80.603-90.369c-0.712-51.103,40.129-93.129,91.242-93.852
c37.939-0.535,70.822,21.867,85.573,54.339c20.269,17.972,52.029,20.098,66.609,4.515c18.602-19.858-10.611-33.243-10.454-22.358
c0.094,8.483,16.19,16.464-4.108,18.937c-20.289,2.462-21.291-17.131-21.291-17.131c-7.993,0.108-18.67,14.79-18.67,14.79
c-5.904-7.178-4.669-22.437-4.669-22.437c-26.193-3.99-13.506-30.311-13.506-30.311c36.08,35.075,44.825-14.428,75.313-14.852
C306.83,19.372,317.515,44.518,317.864,45.321z M140.491,144.766c11.804,3.561,24.247-3.088,27.798-14.862
c3.551-11.753-3.16-24.195-14.943-27.736c-9.249-2.788-18.8,0.705-24.252,7.965c-0.168-9.423-6.267-18.101-15.802-20.987
c-11.814-3.551-24.247,3.088-27.809,14.852c-3.531,11.773,3.149,24.205,14.954,27.746c0.996,0.303,2.021,0.494,2.994,0.654
c-4.103,2.765-7.38,6.816-8.916,11.938c-3.541,11.763,3.16,24.195,14.953,27.746c11.815,3.571,24.247-3.089,27.819-14.862
c1.428-4.742,1.117-9.604-0.476-13.958C137.953,143.85,139.187,144.365,140.491,144.766z" stroke-width="" stroke="none" fill="url(#4)"></path>
</g>
</g></g>
<g id="47"> <g name="draga" id="Decora_0401557309246" class="a47" style="transform: matrix3d(0.9396932079436155,0,0.34202003979392304,0,0,1,0,0,-0.34202003979392304,0,0.9396932079436155,0,18.648666993560994,0,449.23583425685115,1)">
<g>
<path d="M317.864,45.321c0.368-0.771,13.906-29.189,52.57-29.744c38.604-0.533,50.145,28.148,50.494,29.033
c-0.285-21.76,35.988-22.987,59.936-23.322c23.957-0.345,114.675-1.615,114.675-1.615c0.275,19.613-38.146,23.047-38.146,23.047
c7.395,10.787-3.344,21.819-3.344,21.819c-8.12-9.315-32.057-8.991-32.057-8.991c0.197,13.788-21.337,31.519-21.337,31.519
c1.725-32.694-38.118-26.328-38.118-26.328s7.414,10.787-2.598,21.819c-10.001,11.023-7.746,16.809-7.746,16.809
c-14.513,0.197-30.008-17.002-30.008-17.002c-2.687,16.024-27.77,38.128-52.462,38.483c-24.683,0.344-55.886,0.777-55.886,0.777
c-0.295-21.044,29.427-24.371,29.427-24.371c-1.07-23.937,22.082-30.067,22.082-30.067s-1.294,11.63,10.327,11.483
c11.61-0.178,16.346-24.919-13.388-22.329c-29.732,2.59-51.43,58.792-70.797,76.494c-19.347,17.681-39.783,9.995-39.783,9.995
c-11.384,15.406-23.103,9.043-23.103,9.043c-2.706,13.827-16.542,10.385-16.542,10.385l-2.598-1.58
c-7.708,19.589-21.88,35.932-39.965,46.369c-2.87,11.488-8.379,24.402-18.87,26.497c0,0,6.758,15.876-9.197,17.554
c0,0,13.791,51.345-35.348,67.282c0,0,9.66,16.563,0.413,29.753c-8.986,12.817-21.675,6.519-22.396,6.14
c1.021,0.712,30.288,21.006,4.208,43.491c0,0-16.61-25.546-26.222-7.629c-10.629,19.751,9.729,22.379,1.238,37.01
c-8.512,14.631-29.595,12.771-32.734-3.901c-3.119-16.651-10.379-67.369,8.262-84.346c18.642-16.936,17.866-19.828,17.866-19.828
s-16.71-1.215-27.076-15.601c-10.355-14.355-9.985-39.068,10.049-60.377c19.973-21.288-11.194-33.184-13.504-33.214
c0.924-0.432,36.133-16.109,44.413,10.991c0,0,15.964-0.216,18.25,7.011c2.265,7.227-9.992,12.463-9.992,12.463
s13.16,7.08,13.357,21.614c0,0-21.77-0.431-21.583,13.367c0.197,13.787,33.735,24.925,46.246-15.184
c5.143-16.498,1.097-30.662-5.46-41.624c-44.936-5.811-79.94-43.773-80.603-90.369c-0.712-51.103,40.129-93.129,91.242-93.852
c37.939-0.535,70.822,21.867,85.573,54.339c20.269,17.972,52.029,20.098,66.609,4.515c18.602-19.858-10.611-33.243-10.454-22.358
c0.094,8.483,16.19,16.464-4.108,18.937c-20.289,2.462-21.291-17.131-21.291-17.131c-7.993,0.108-18.67,14.79-18.67,14.79
c-5.904-7.178-4.669-22.437-4.669-22.437c-26.193-3.99-13.506-30.311-13.506-30.311c36.08,35.075,44.825-14.428,75.313-14.852
C306.83,19.372,317.515,44.518,317.864,45.321z M140.491,144.766c11.804,3.561,24.247-3.088,27.798-14.862
c3.551-11.753-3.16-24.195-14.943-27.736c-9.249-2.788-18.8,0.705-24.252,7.965c-0.168-9.423-6.267-18.101-15.802-20.987
c-11.814-3.551-24.247,3.088-27.809,14.852c-3.531,11.773,3.149,24.205,14.954,27.746c0.996,0.303,2.021,0.494,2.994,0.654
c-4.103,2.765-7.38,6.816-8.916,11.938c-3.541,11.763,3.16,24.195,14.953,27.746c11.815,3.571,24.247-3.089,27.819-14.862
c1.428-4.742,1.117-9.604-0.476-13.958C137.953,143.85,139.187,144.365,140.491,144.766z" stroke-width="" stroke="none" fill="url(#3)"></path>
</g>
</g></g>
</g>
</svg>
No desesperes si no entiendes lo que lees , te iré explicando poco a poco a lo largo de estos tutoriales que aqui empiezan , y te ire esplicando cada una de las partes de lo que es un svg y como animarlo, insertarlo en la web , y te enseñare a realizar logotipos vectoriales online y animaciones web más complejas , aqui tienes más ejemplos realizados desde nuestra aplicación web de animaciones y en nuestro blog externo de animaciones svg
https://animacionesweb.online/animaciones/star-ward.svg
https://animacionesweb.online/animaciones/pecera.svg
https://animacionesweb.online/animaciones/slaider/harry-potter-slaider.svg
Animo sigue conmigo y cualquier duda ponte en contacto conmigo