Poner titulo encabezado svg

[lobopk2]

Hola buenas, acabo de registrarme en este foro, soy principiantes en esto del codigo, pero lo estoy estudiando.

Estoy teniendo un problema con el encabezado de la pagina.

Hize el diseño con el inkscape, porque me es mas facil, colocar ahi las imagenes y editar todo lo que es la maquetacion.

Despues en el <header> puse la imagen.svg y hasta ahi todo correcto, todo se ve bien.

El problema es que el titulo de la pagina lo hize tambien vectorial y claro eso no me sale para modificar y ponerlo en <h1>. que hasta ahi lo veo normal, porque lo que esta enlazando es una imagen.

Tampoco puedo poner texto en esa imagen, desde html y es una cosa que quiero hacer, ese es el problema.

Se que se puede editar el <header> pero claro editar la imagen supongo que es lo que tendria que hacer para poder poner texto y para poder poner el titulo en <h1>

Si supiera editar la imagen desde html, podria quitar el titulo que esta en .svg y asi ponerlo en html, con lo cual podria ya poner ese titulo como <h1>, supongo que al saber hacer eso, tambien sabria poner texto en la imagen porque seria lo mismo.

Por ultimo, se puede poner texto invisible?

Es decir, si el texto que esta en .svg lo dejo y puediera editar esa imagen poniendo un texto el cual podria ponerlo en <h1>, pero para que no chafara el que esta en la imagen, tendria que ponerlo invisible.
Si se puediera que no lo se, supongo que el navegador lo tendria encuenta como un titulo h1, no?

Bueno gracias desde ya, por haber leido todo el tocho, no se si alfinal me pude explicar bien lo que quise decir

[lobopk2]

88 visitas y nadie me puede responder? wow

Es algo disparatado lo que digo o es muy complicado?

[DesgraciadoGabo]

Primero que nada, el hecho de que tenga tantas visitas no obliga a nadie a responder, este foro es para ayudar no para exigir.

Segundo, aprende a redactar tus problemas, no es clara la información que nos estas dando...

Entiendo que quieres poner un svg sobre otro, eso es posible, coloca una estructura asi mas o menos

Código HTML:

<header>
   <svg>...</svg><!--SVG de fondo -->
   <svg>...</svg><!--SVG TITULO* -->
</header>
 

Donde el header tengas una posición relativa y los siguientes svg les puedes crear una clase con posición absoluta y un z-index diferente (uno encima de otro)

Saludos

[caricatos]

Hola:

Si bien el contenido svg puede ser editable, porque es texto, no entiendo usar ese formato para una página web... (tal vez no comprendí el mensaje)...

Lo que no comprendo es poner una imagen svg en una etiqueta h1, y pretender que se agrande.

Las imagenes svg son escalable, pero deben tener sus medidas... y luego usar el atributo viewBox.

h1 agranda (o mejor dicho es cabecera) para textos; las imágenes debes maquetarlas de otra manera, con atributos o estilos.

Saludos

[lobopk2]

Muchas gracias por las respuesta, gracias: DesgraciadoGabo y caricatos

Contestando a DesgraciadoGabo:

este foro es para ayudar no para exigir

Desde luego asi lo pienso, mi intencion no fue exigir si eso fue lo que vistes, ni mucho menos, solo me sorprendio nada mas.

no es clara la información que nos estas dando...

Tienes razon, a veces es dificil explicar con palabras algunas cosas que tu sabes, pero que otro las ve de otra manera, para eso me pueden preguntar y ver si puedo definier mas (lo siento)

Entiendo que quieres poner un svg sobre otro

No es eso lo que quiero, lo que quiero es escribir dentro de un svg, lo dire mas simple, imaginate que tengo un cadrado negro .svg. Ahora quiero poner dentro de ese cuadrado un texto o un titulo, en la posicion que quiera, mediante html. Pues eso es lo que no se hacer.

Puedo hacerlo con el inkscape o cualquier editor svg, puedo poner texto, pero cuando inserto la imagen, ese texto no me aparece en el codigo html (me aparece la imagen entera y el texto que haya escrito), y si ese texto quiero que el navegador lo interprete como un h1? como no aparece no lo puedo hacer. Por eso necesito editarlo en html, para que el navegador vea el h1, pero tiene que estar dentro del cuadro negro svg.

Me explique mejor?

Por cierto, no sabia que la etiqueta <svg> existia, yo lo inserto en el codigo con la etiqueta <img>.

contestando a caricatos:

no entiendo usar ese formato para una página web

bueno usar svg, es algo personal, en mi opinion tiene mas calidad aunque pesa mas, Tambien domino mas la edicion de svg que de jpg, por ejemplo, no se cada uno...

Lo que no comprendo es poner una imagen svg en una etiqueta h1

no no, no es eso, es justo al reves, poner una etiqueta h1 dentro de una imagen svg.

las imágenes debes maquetarlas de otra manera, con atributos o estilos

quizas sea eso, lo que no se como se hace.

Bueno una vez mas gracias por vuestro tiempo, espero que sirva esto para mas gente como yo que no sabe hacerlo.

[xerifandtomas]

Tu problema es de maquetacion y seguramente lo más fácil es resolverlo con css.

Una de las soluciones podría se utilizar el h1 y con css le pones la imagen que quieras de fondo.

Código HTML:

<h1 class="fondo">mi titulo  </h1>
 

Código CSS:

.fondo {
background: url("background.svg");
}
 

[lobopk2]

Vale ya se cual es el problema, despues de estar estudiando un poco.

Yo introducia el svg en el codigo html, mediante la etiqueta <img>, pero me he dado cuenta que el svg, es un lenguaje de xml y se puede editar, esa era mi ignorancia.

Claro ahora yo habro el svg en xml y veo donde esta el texto, asi que me imagino que donde esta el texto, solo hay que aplicarle la etiqueta h1.

aunque no se si el navegador lo entendara como titulo principal, ya que al aplicarlo no se ve ningun cambio, dado que solo es para el navegador, pero intuyo que asi sera, que el navegador lo entendera como titulo principal.

Otra de las cosas que he leido aunque no lo entendi muy bien, es que un svg, no admite css. he visto que tiene dentro una etiqueta style="" esta llena de cosas, pero si le agrego algo o no funciona o no sale.

Alguien puede confirmar si es asi? es imposible agregar css a una archivo svg?

En principio me parecio una tonteria ya que el svg lo edito como quiera y le doy los efectos que quiera, pero he visto que con css, tambien se pueden hacer cosas como el mouseover y me gustaria ponerselo al svg.

Gracias por las respuestas

[caricatos]

Hola:

Deberías informarte antes de emprender tu proyecto... svg es un formato de imágenes, y html o xhtml es un formato para páginas web. Lo que es más genérico es el formato xml, que incluso se usa en ficheros de texto, presentaciones y más (tengo entendido que oppenOffice graba en xml... pero no lo he investigado).

En la sintaxis svg no existe la etiqueta h1, ni la gran mayoría de etiquetas (x)html; pero existe la etiqueta style, aunque los atributos o estilos no siempre son los mismos.

Saludos

[lobopk2]

hola caricatos:

Deberías informarte antes de emprender tu proyecto

y porque crees que escribi en el foro?

Seguramente si lo hubiera estudiado antes, no haria falta que preguntara, pero resulta que muchas veces la informacion, no es tan facil de encontrar para los que no saben de los que saben.

Bueno entonces veamos... si en xml no existe la etiqueta h1, hay alguna manera de hacer una etiqueta h1en html que no se vea?

es decir en el codigo de html, yo pongo <h1> y ya tengo la etiqueta echa, me refiero a que no se vea, como darle un color transparente.

Porque digo esto? he leido que la etiqueta h1 los buscadores las posicionan bien, claro si el titulo de la pagina, lo tengo en el svg, y los xml no pueden llevar la etiqueta <h1>, como implemento esta etiqueta para que los buscadores la posicionen?

Por eso habia pensado en lo de color de la letra invisible, no se...
O pensais que no vale la pena?

[caricatos]

Hola:

No confundamos svg y xml. svg es xml, pero no "viceversa". En xml se puede usar cualquier etiqueta, pero para maquetar y conseguir que la interpreten los navegadores debes asociar una hoja xsl (que también es xml).

Si tu problema es "SEO", tenemos un buen foro SEO donde informarte... tal vez tenga más importancia la etiqueta title, o las palabras clave y un buen sitemap... y sobre todo el contenido. Con un buen contenido tu página se posicionará solita.

Un svg podría posicionar bien como imagen, pero siempre con más trabajo SEO (título, inclusión en sitemap, texto alternativo, nombre...)

Saludos

[lobopk2]

esto me parecio muy interesante

pero para maquetar y conseguir que la interpreten los navegadores debes asociar una hoja xsl (que también es xml).

eso significa que podria asociar esta hoja xsl al xml para poner etiquetas tipo h1?

Uff que lio.

Esque veras... se que me estoy saliendo un poco de la norma, pero me gustaria hacer una pagina que la mayor parte fuera svg, mas que nada porque es super facil la edicion.

se pueden hacer cosas muy buenas, como por ejemplo esta pagina que esta echa solo con un svg.

http://felipesanches.googlecode.com/svn/trunk/SVG/minigames/TuxVsMSNbug/minigame.svg

Como puedes ver solo es svg, se que tendre que usar html, css y javascript, pero la mayor parte me gustaria hacerla en svg.

Lo malo es eso a la hora de etitar el xml, no son las etiquetas igual, para un link no es la etiqueta <a> sino <xlink> y para los textos, que son vectoriales tambien, salir salen en el xml, pero claro si no puedo poner la etiqueta h1, porque el navegador no la interpretara por ser un xml, quizas tenga que enlazar como dices tu una hoja sxl o quizas la etiqueta sea otra, no?

El posicionamiento seo es importante, pero como tu dices, puedo poner la etiqueta <title>.

El problema seria que si en el svg tubiera texto, no podria entonces usar ninguna etiqueta h, no?

o que pasaria si encerrara el svg en una etiqueta h?, entonces el buscador indentificaria eso como algo importante?

bueno quizas tenga que estudiar lo que es xml, porque esto se me va de las manos, algun tutorial o libro por la red que me podais aconsejar mirar de xml, para principiantes?

[caricatos]

Hola:

Dentro de un html puedes incrustar una imagen svg de muchas formas, pero siempre será interpretada como una imagen, así que el texto que contenga difícilmente será indexado por buscadores (en el futuro podrá ser distinto, pero hoy es así -creo-)... Vuelvo a insistir que te animes a consultar en nuestro foro sobre SEO.

Puedes incrustar con la misma etiqueta svg, o mediante otras formas como usando la etiqueta img, embed, object, iframe... creo que te lo estoy poniendo fácil:

<html>
<head>
<title>
...
<body>
<h1>Contenido importante</h1>
<svg>
...
<img src='imagen.svg' alt='texto importante' title='también importante' width='100%'

Saludos

[lobopk2]

Al final encontre una solucion pero tengo una duda.

El asunto es que dentro de un documento html, inserte una etiqueta <svg> ahi pegue todo el codigo del xml que me ofrecia el nikscape, hasta ahi todo correcto.

He descubierto un style muy interesante el cual hace que se oculte cualquier etiqueta display:none.

Asi que puse una etiqueta h1 tal cual:

<h1 style="display:none"> Titulo oculto </h1>

Y funciono, el titulo no se ve ni ocupa espacio, asi que tengo mi svg, donde lo quiero y tambien tengo un titulo reconocible en html, pero es oculto.

Entonces mi pregunta es:

Este titulo oculto el buscador lo lee y le da la importancia de h1 o por el contrario al estar oculto no la lee?

si no lo sabeis, donde podria informarme?

Gracias, sigo avanzando :)

[caricatos]

Hola:

Tenemos un foro para "SEO" para dudas de posicionamiento y afines...
Yo evitaría en principio estrategias porque los algoritmos de los buscadores también podrían detectarlas.

Los encabezados son una pequeña parte que tampoco debería preocuparte... creo que una etiqueta title debería ser más importante (ya sea en la cabecera del documento, como en las distintas etiquetas que uses)

Te recomiendo que inicies un hilo en el foro SEO.

Saludos

[lobopk2]

Bueno como ya es la segunda vez que me lo has dicho, entiendo perfectamente que no es aqui donde tengo que escribir, asi que mande el mensaje a la seccion de seo.

No obstante, quiero aclarar que el tema de ocultarlo mas que nada es proque como no puedo poner el h1 en xml, pues se me ocurrio esta idea en html.

Seguro que title es mejor para el buscador, pero title ya tiene un nombre, y el encabezado otro, ya sabes contra mas azucar mas dulze, si fuera el mismo nombre no haria falta que lo volviera a poner.

y otra cosa es que si algunos titulos van en el archivo xml, al no saber si esta opccion que digo funcionara, pues ya tendria los titulos para que el buscador los reconozca.

Puede que sea una trampa, pero no para hacer algo fraudulento ni nada de eso, solo como solucion.