sábado, 20 de diciembre de 2008

¡Hola mundo!

Lo mejor para empezar es con el clásico Hola mundo. Hacer que un programa genere un Hola Mundo no es difícil, basta pegar las entradas del fichero SVG dentro de la función fprintf o fputs donde se va escribiendo el fichero SVG.
Es muy importante añadir una barra inversa (\) antes de cada comillas ("), ya que sino, se interpreta el final de la cadena y fallará el programa o no se podrá compilar.

En breve subiré el código fuente a otra página web donde publicar código fuente, ficheros SVG y descargas con comodidad, ya que este blog falla a la hora de copiar el código fuente.
Quedaría algo así:

No hay mucho que explicar de este hola mundo:
  • La codificación (encoding="ISO-8859-1") es para indicar la codificación de carácteres del fichero SVG. Si se indica mal, los acentos y signos de puntuación no ingleses aparecerán mal. El valor introducido depende de como se guarde el fichero de texto cuando se escriba.
  • width y height indican el tamaño que ocupará en pantalla el fichero SVG. Si su valor es 100%, indican que el fichero SVG ocupará el 100% del espacio de pantalla o el espacio que le indique la etiqueta EMBED. Si son números sin porcentaje, indican un tamaño fijo que no se cambia. Si la etiqueta EMBED da al fichero SVG un tamaño más pequeño que lo indicado por las cifras, este aparecerá recortado, y si es mayor, aparecerá con una zona en blanco sin ocupar.
  • ViewBox en cambio, indica la porción de la imágen SVG que se recortará y se encajará en el recuadro indicado por width y height.
  • La etiqueta text indica el texto. La forma más simple de usarla es introduciendo el texto diréctamente entre la etiqueta de abrir y la de cerrar. Sus propiedades indican la fuente, color, posición... text-anchor permite alinear el texto (izquierda con end, derecha con start y centro con middle) respecto del punto indicado por las coordenadas x,y (en este caso 60 para los dos valores).
El anterior código fuente funciona bien, pero no hace nada especial que no se pueda hacer con el Block de notas o cualquier otro editor de texto (VI, Gedit...) o con Inkscape. Sustituyendo algunas funciones por printf y cambiando algunos valores numéricos por variables, se puede conseguir un programa que genere un fichero SVG del tamaño dado, con la frase ¡Hola mundo! centrada en el fichero SVG.

El programa ahora usa dos variables para determinar el ancho y alto de la imagen SVG. Además, sitúa el texto en el centro mediante el uso del parámetro text-anchor="start" en la etiqueta de texto y de situar el punto donde se alinea el texto justo en el centro de la imagen. Si se cambian los valores de alto y ancho, el archivo SVG que sale será más grande o más pequeño. Además, ahora el texto tiene una fuente un poco más grande que antes.
¿Que se podría destacar de este programa?
  • Puede crearse algo similar en PHP. En mi caso he usado C por su sencillez de comprensión en ejemplos sencillos, pero con PHP se podría hacer un programa similar.
  • Las variables ancho y alto reciben el valor en la compilación, pero un programa "bien hecho" tomaría los valores de estas variables de parámetros que se le pasan al programa, de ficheros de texto de entrada de datos, de bases de datos... cada caso es un mundo.
  • Se usa %.1f en printf ya que en pantalla no se necesita una precisión superior a un decimal. Si no se pone nada, printf dejaría 6 decimales, lo cual aumentaría el tamaño del fichero. En este ejemplo con pocos usos no importa mucho este detalle, pero en una polilínea de 500 puntos, si influye más este detalle.
  • Para situar el texto se usan números en punto flotante (%.1f), mientras que el tamaño de la imágen SVG se usan números enteros (%i). Esto es porque el tamaño de la imágen tiene que ser un número entero, pero luego, a la hora de situar los elementos dentro de esta, se pueden usar números en punto flotante.
  • Se escribe (float) delante de cada cálculo con números float. Esto es porque si no se hace, el valor se calcula primero como número entero y luego se convierte a float (es decir, se haría la división sin decimales). En cambio si se convierte el número antes a float, se hace el cálculo como coma flotante, y así se permite que el resultado de las operaciones pueda llevar decimales, haciendo que la posición del texto sea más precisa que si se calcula sin decimales.
Fuente:
  • http://vanus01.net/web/generando-imagenes-svg/2/

2 comentarios:

  1. me interesa,quisiera implementar estructura de datos(arboles binarios) y que me de una imagen svg para ver como se ve podrias ayudarme zupertruko? mi correo es satchsatriani@hotmail.com espero tu respuesta gracias

    ResponderEliminar