Creé un ícono personalizado de Facebook usando Inkscape y lo guardé como un svg. Utiliza la misma fuente que el título de mi página, que usa la fuente "ubuntutitling-bold-webfont", a la que he hecho referencia como .woff en un archivo CSS. El título funciona, pero el svg no: muestra la "f" en algún tipo de fuente predeterminada. El archivo de fuente se encuentra en ../fonts/ubuntutitling-bold-webfont.woff en relatividad con el archivo CSS y de imagen, y en fonts / ubuntutitling-bold-webfont.woff en relatividad con la página web.
Busco ¿Cómo incrustar las fuentes web de Google en un SVG? , pero estoy un poco confundido sobre cómo aplicar el código al SVG, si es que lo necesito. ¿Puede el SVG usar la fuente .woff referenciada en el archivo CSS? ¿Fue correcta la forma en que cambié manualmente la fuente dentro del archivo SVG?
Aquí está el código para el SVG:
<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="80"
height="80"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="New document 1">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="26.573808"
inkscape:cy="42.478414"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1619"
inkscape:window-height="611"
inkscape:window-x="165"
inkscape:window-y="301"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0.75006053,-981.36219)">
<rect
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
id="rect2987"
width="70"
height="70"
x="4.2499394"
y="986.36218"
rx="10"
ry="10" />
<text
xml:space="preserve"
style="font-size:109.44319916px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#fffffe;stroke-width:2.73607969;stroke-opacity:1;font-family:ubuntutitling-bold-webfont';-inkscape-font-specification:ubuntutitling-bold-webfont'"
x="25.989071"
y="1096.0118"
id="text3757"
sodipodi:linespacing="125%"
transform="scale(1.0381556,0.96324674)"><tspan
sodipodi:role="line"
id="tspan3759"
x="25.989071"
y="1096.0118"
style="stroke-width:2.73607969">f</tspan></text>
</g>
</svg>
Gracias de antemano.
Respuestas:
Necesitas poner CSS en la
defs
sección. Algo como:fuente
<object>
para incrustar el svg, en lugar de<img>
, ¡la fuente se carga correctamente! github.com/marians/test-webfonts-in-svg/pull/1<object>
tiene algunas desventajas. Después de revisar vecta.io/blog/best-way-to-embed-svg , decidí incluir el marcado de svg en mi documento.Para cargar Google o cualquier otro formato externo en el archivo SVG, debemos agregar la etiqueta de estilo en la etiqueta defs de la siguiente manera:
fuente
Editar: volví a leer su pregunta ... parece que su mejor opción podría ser convertir el texto de su icono en un esquema, por lo que no necesita la fuente en absoluto. (Puede que tenga que verificar su licencia de fuente para ver si esto está bien).
Asumí, incorrectamente, que tenías un icono de vector y estabas buscando la mejor manera de mostrarlo en tu sitio web.
Creo que tienes algunas opciones.
Usa una imagen SVG
Podrías usar el SVG como una imagen en sí misma. Perderá la compatibilidad con versiones anteriores de IE, pero podría cambiar un PNG o GIF por IE8 y versiones anteriores. O no se preocupe por IE8 y el soporte anterior (puede o no ser una opción, dependiendo de su público objetivo).
Usa el generador de Font Squirrel
Font Squirrel tiene un generador @ font-face que hace todo el trabajo pesado por usted, si ya tiene la fuente creada.
Font Squirrel @ generador de fuentes
Usa una imagen PNG
¿Por qué estás usando SVG? ¿Es para un mejor zoom y un alto soporte de DPI? Si es así, hay formas de hacerlo con CSS y PNG. Realmente depende de su uso previsto.
No soy fanático de incrustar iconos en las fuentes. Pierdes el control del nivel de píxeles. Hay algunas situaciones en las que hacerlo es una buena opción, pero a menudo es mucho más esfuerzo que vale la pena y produce peores resultados.
fuente
Ese es un ejemplo para la siguiente fuente. https://fonts.googleapis.com/css?family=Fredoka One Open visite la página de fuentes y copie todo en "defs"
fuente